今天有同学私信我说，他们的前端让他后端生成海报。
理由：因为他们前端不会绘制海报。
这同学呢，又不大会前端知识，希望我能帮他甩锅。
哈哈，我最喜欢的事就是甩锅，这篇文章请查收！
1、html2canvas
如果不会 canvas 绘图，那这个库就非常适合你，你只需要正常的排版传统 div css 就OK，随后使用这个库，一行代码搞定。
官方地址：https://html2canvas.hertzen.com/
GitHub地址：https://github.com/niklasvh/html2canvas
这库只做了一件事，就是把 Dom 里面的元素复刻到 canvas 里面，只要到 canvas 后，剩下的导出图片就非常容易了。
大部分样式布局这个库都支持，唯一需要处理的就是如果里面使用到图片，需要自行处理跨域问题。
这里再贴上怎么处理 canvas 转图片的后续：
代码语言：javascript复制Html2canvas(document.querySelector("#poster")).then(canvas => {
// base64 编码的图片
const imageBase64Url = canvas.toDataURL("image/png", 1.0);
// 转换成 Blob 类型
const imageBlob = self.dataURItoBlob(self.posterUrl);
// 添加 canvas 到 body
document.body.appendChild(canvas)
});
dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0){
byteString = atob(base64Data.split(',')[1]);
}else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i ) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type: mimeString});
}
如果直接显示可以使用 imageBlob 变量，如果是要上传可以使用 Blob。
2、vue-canvas-poster
如果你喜欢配置型的，想直接在 canvas 里面绘制那种，同时又使用的 Vue，就可以使用这个库。
官网地址：https://sunniejs.github.io/vue-canvas-poster/#/
可以像写配置一样的绘制海报。
如果是小程序开发，也有类似的库，参考：https://github.com/Kujiale-Mobile/Painter
这两个的思路是一样的，网上有非常多这类的库，这两个作者使用过，体验比较 nice，所以比较推荐。
3、总结
这是一个前后端分离的时代，也是考验技术人甩锅能力的时代。
一个会甩锅的后端，一些前端知识多少也得会一些的，否则在甩锅的时候，容易甩不掉。
最后，祝大家前后端相处融洽！
你学废了么？
