前端-如何将网页保存为图片

问题重现

前台生成一张复杂的海报，海报中包含外链图片资源 问题难点

1. 网页由多个内容组成，前端不好将整个网页保存为图片。当然，可以使用canvas进行绘图（canvas语法参考）
2. 网页中存在外链图片资源

解决方案

概述（笔者以Vue为例）

主要使用html2canvas，将页面转成canvas，从而转成图片。但使用html2canvas无法对外链图片资源进行良好的处理，当然网上有很多跨域的解决方案，但是，很不好意思的是，网上处理的跨域方案，都不太适用。所以，我采用了image-to-base64，将图片转成base64格式，然后使用html2canvas，保存图片。 综上所述，本文主要处理的问题是，将含有外链图片资源的网页保存为图片.

安装依赖包（使用npm）

• 安装html2canvas html2canvas介绍 npm install --save html2canvas
• 安装image-to-base64 image-to-base64介绍 npm i -S image-to-base64

图片转base64

import imageToBase64 from 'image-to-base64';
// this.postImage = url;
imageToBase64(this.postImage).then((baseUrl) => {
  this.postImage = `data:image/jpg;base64,${baseUrl}`;
}).catch((error) => {
  console.log(error);
});

下载图片

• html片段演示

<div ref='post'>
	海报内容
</div>
<a ref='down' style="display:none"></a>

• js片段演示

drawPostImage() {
  html2canvas(this.$refs.post).then((canvas) => {
    const oImg = new Image();
    oImg.src = canvas.toDataURL(); // 导出图片
    this.$refs.down.href = canvas.toDataURL();
    this.$refs.down.download = '下载图片名称';
    this.$refs.down.click();
  });
},