熟悉“前端晚自修”的朋友們應(yīng)該知道，我們每期的頭圖除了上面的文字隨著每期變動(dòng)以外，幾乎是一模一樣的（因?yàn)樘珣辛藒）。這個(gè)頭圖雖然丑了一點(diǎn)，但是也還說的過去，畢竟是我傾盡畢生藝術(shù)細(xì)胞拼出來的，雖然中間唯一的圖片還是從網(wǎng)上找的?。

前期推送的時(shí)候，都是從 psd 原稿生成圖片做頭圖，實(shí)在太麻煩了。后來還有朋友和我一起來寫文章，要讓他們也在電腦上安裝 PS ，而且需要安裝好看的字體更加是有些不便。因此便萌生了在線生成頭圖的想法。

TL;DR

最終效果如下：

在線地址：online-poster，微信上點(diǎn)不了外鏈，可點(diǎn)擊 {閱讀原文}

核心功能有：

生成圖片（文字居中）

圖片預(yù)覽和導(dǎo)出

自定義字體

生成圖片

這一部分比較簡(jiǎn)單，憑著紅寶書上對(duì) Canvas 的講解，就可以實(shí)現(xiàn)。不過要實(shí)現(xiàn)文字保持居中，倒是需要“特殊”設(shè)置一下：

context.textAlign = 'center'

圖片預(yù)覽和導(dǎo)出

圖片預(yù)覽還是比較簡(jiǎn)單的，直接將 Canvas 畫到頁(yè)面上就可以，這塊不多說。對(duì)于圖片導(dǎo)出，這一塊需要注意一下。我是借鑒掘金上大佬的一篇文章，canvas入門實(shí)戰(zhàn)--邀請(qǐng)卡生成與下載，核心代碼如下：

var exportImage = canvas.toDataURL('image/png'); var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); saveLink.href = exportImage; // 設(shè)置下載圖片的名稱 saveLink.download = text '.png'; //下載圖片 var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); saveLink.dispatchEvent(event);

但是這一塊需要特別注意的是可能會(huì)存在跨域問題，在將圖片畫到 Canvas 上的時(shí)候往往會(huì)存在跨域問題：

var image = new Image(); image.setAttribute("crossOrigin", 'Anonymous'); // 解決跨域 image.src = 'http://pazgkbbu5.bkt.clouddn.com/bg.png'; context.drawImage(image, 0, 0, canvas.width, canvas.height);

自定義字體

其實(shí)自定義字體原理和字體圖標(biāo)差不多，也不是很難理解。難的是如何創(chuàng)建字體資源，我這里用的是 有字庫(kù)，生成字體資源以后，直接引入到頁(yè)面中就可以了（其實(shí)引入的 css 文件就是以下代碼）：

@font-face {font-family: 'chenjishiguyun-13c94e564b183ba';src: url('//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.gif?r=82303333002');src: url('//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.gif?r=82303333002?#iefix') format('embedded-opentype'), url('//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.png?r=82303333002') format('woff2'), url('//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.bmp?r=82303333002') format('woff'), url('//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.jpg?r=82303333002') format('truetype');font-weight: normal;font-style: normal; }.css13c94e564b183ba {font-family: 'chenjishiguyun-13c94e564b183ba'; }

最終，大功告成了。簡(jiǎn)單功能，粗糙實(shí)現(xiàn)，大家不要吐槽哈。

--EOF--

總結(jié)

以上是生活随笔為你收集整理的使用 Canvas 生成公众号头图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。