本文共 956 字，大约阅读时间需要 3 分钟。

问题重现

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

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

解决方案

概述（笔者以Vue为例）

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

安装依赖包（使用npm）

• 安装html2canvas
  npm install --save html2canvas
• 安装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片段演示

   
    	海报内容
   

• 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();  });},

转载地址：http://afdlf.baihongyu.com/