使用html2canvas将h5页面转换成图片保存至本地

需求：用户点击保存按钮，将页面保存到本地。

这里使用html2canvas插件库，具体用法如下：

（1）安装依赖包：

//npm方式
npm install --save html2canvas
//yarn方式
yarn add html2canvas

(2)引入并使用

import html2canvas from "html2canvas"

//html层
<div id="canvasImg" className={styles.cardWrapper}>
  这里是需要保存成图片的内容
</div>
<Button
  className={styles.mainButton}
  block
  shape='rounded'
  color='primary'
  onClick={()=>  saveToImg() }
>
  保存图片
</Button>

//js层
function saveToImg() {
  //点击保存按钮的回调事件
  const element: HTMLElement = document.getElementById('canvasImg') as HTMLElement; // 需要导出的页面
  html2canvas(element, {
    allowTaint: true,
    useCORS: true,
  }).then((canvas) => {
    // imgUrl 是图片的 base64格式 代码 png 格式
    const imgUrl = canvas.toDataURL('image/png');
    //下载图片的功能。
    downloadIamge(imgUrl, "plantCardImg.png")
  });
}

function downloadIamge(imgsrc:string, name:string) {  //下载图片地址和图片名
  const image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    const url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    const a = document.createElement("a"); // 生成一个a元素
    const event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
}