使用 Canvas 生成公眾號頭圖

熟悉“前端晚自修”的朋友們應該知道，我們每期的頭圖除了上面的文字隨著每期變動以外，幾乎是一模一樣的（因為太懶了~）。這個頭圖雖然醜了一點，但是也還說的過去，畢竟是我傾盡畢生藝術細胞拼出來的，雖然中間唯一的圖片還是從網上找的?。

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

TL;DR

最終效果如下：

線上地址：online-poster，微信上點不了外鏈，可點選 {閱讀原文}

核心功能有：

1. 生成圖片（文字居中）
2. 圖片預覽和匯出
3. 自定義字型

生成圖片

這一部分比較簡單，憑著紅寶書上對 Canvas 的講解，就可以實現。不過要實現文字保持居中，倒是需要“特殊”設定一下：

context.textAlign = 'center'
複製程式碼

圖片預覽和匯出

圖片預覽還是比較簡單的，直接將 Canvas 畫到頁面上就可以，這塊不多說。對於圖片匯出，這一塊需要注意一下。我是借鑑掘金上大佬的一篇文章，canvas入門實戰--邀請卡生成與下載，核心程式碼如下：

var exportImage = canvas.toDataURL('image/png');
var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
saveLink.href = exportImage;
// 設定下載圖片的名稱
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);
複製程式碼

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

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);
複製程式碼

自定義字型

其實自定義字型原理和字型圖示差不多，也不是很難理解。難的是如何建立字型資源，我這裡用的是 有字型檔，生成字型資源以後，直接引入到頁面中就可以了（其實引入的 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';
}
複製程式碼

最終，大功告成了。簡單功能，粗糙實現，大家不要吐槽哈。

--EOF--