使用 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--