Canvas技术保存前端图片

一.CanvasAPI

Canvas

二.代码展示

<div id="myCard">
  <div>
      <el-image :src="图片URL" alt="Server Image" />
  </div>
...
</div>

import html2canvas from 'html2canvas';

const myDiv = await document.getElementById('myCard');
        html2canvas(myDiv, {
          useCORS: true, // 启用CORS以处理跨域图片
          allowTaint: true, // 允许污染画布以处理跨域图片
          scrollY: 0,
          scrollX: 0,
        }).then(canvas => {
          const dataURL = canvas.toDataURL();
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = '图片名称';
          link.click();
        });

三.问题分享

错误效果：

如果使用外部资源图片，会出现下载下来的图片为空白：

此时，解决这个问题需要对图片进行转换，转换成base64格式赋值给src属性，即可完成所需图片保存！
 

const imgToBase64 = (url) => {
      let img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        base64格式图片 = canvas.toDataURL('image/png');
        //base64格式图片 -> 存储并赋值上述div中el-image的src属性
      };
      img.src = url;
    }

成功效果：