甩锅技能：让前端他们自己生成海报

小锟哥哥

发布于 2022-12-05 14:11:11

7110

发布于 2022-12-05 14:11:11

文章被收录于专栏：GoLang全栈

今天有同学私信我说，他们的前端让他后端生成海报。

理由：因为他们前端不会绘制海报。

这同学呢，又不大会前端知识，希望我能帮他甩锅。

哈哈，我最喜欢的事就是甩锅，这篇文章请查收！

1、html2canvas

如果不会 canvas 绘图，那这个库就非常适合你，你只需要正常的排版传统 div+css 就OK，随后使用这个库，一行代码搞定。

官方地址：https://html2canvas.hertzen.com/

GitHub地址：https://github.com/niklasvh/html2canvas

这库只做了一件事，就是把 Dom 里面的元素复刻到 canvas 里面，只要到 canvas 后，剩下的导出图片就非常容易了。

大部分样式布局这个库都支持，唯一需要处理的就是如果里面使用到图片，需要自行处理跨域问题。

这里再贴上怎么处理 canvas 转图片的后续：

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。