类似商城网站开发策划书,电脑网页传奇,产品展示网站开发,做app网站需要什么熟悉“前端晚自修”的朋友们应该知道#xff0c;我们每期的头图除了上面的文字随着每期变动以外#xff0c;几乎是一模一样的#xff08;因为太懒了~#xff09;。这个头图虽然丑了一点#xff0c;但是也还说的过去#xff0c;毕竟是我倾尽毕生艺术细胞拼出来的#xff…熟悉“前端晚自修”的朋友们应该知道我们每期的头图除了上面的文字随着每期变动以外几乎是一模一样的因为太懒了~。这个头图虽然丑了一点但是也还说的过去毕竟是我倾尽毕生艺术细胞拼出来的虽然中间唯一的图片还是从网上找的?。
前期推送的时候都是从 psd 原稿生成图片做头图实在太麻烦了。后来还有朋友和我一起来写文章要让他们也在电脑上安装 PS 而且需要安装好看的字体更加是有些不便。因此便萌生了在线生成头图的想法。
TL;DR
最终效果如下 在线地址online-poster微信上点不了外链可点击 {阅读原文}
核心功能有
生成图片文字居中图片预览和导出自定义字体
生成图片
这一部分比较简单凭着红宝书上对 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?r82303333002);src: url(//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.gif?r82303333002?#iefix) format(embedded-opentype), url(//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.png?r82303333002) format(woff2), url(//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.bmp?r82303333002) format(woff), url(//cdn.webfont.youziku.com/webfonts/nomal/99258/45811/5b6d9ae4f629d919b4accb33.jpg?r82303333002) format(truetype);font-weight: normal;font-style: normal;
}.css13c94e564b183ba {font-family: chenjishiguyun-13c94e564b183ba;
}最终大功告成了。简单功能粗糙实现大家不要吐槽哈。
--EOF--
