H5移动端使用html2canvas点击按钮生成图片并下载

需求：点击按钮下载当前页的图片

可以用html2canvas生成canvas，再由canvas生成base64图片

npm install html2canvas --save

import html2canvas from "html2canvas";

遇到的问题

在保存的时候会遇到图片模糊的问题。

解决方案：可以放大canvas，避免截图模糊

生成好的图片需要保存到手机，因为h5要嵌套在客户端，客户端不支持a标签下载。

如果客户端支持a标签下载可以用a标签，方法也写在下面代码中

解决方案：咨询客户端，看客户端提供的文档，调用客户端的api下载.

<template>
   <div id="download-canvass">
        <div class="logo">
         我是海报
        </div>
        <div class="bottom-download" id="download-btn" @touchStart="touchStart" >
             保存
        </div>
   </div>
</template>

 getCanvas() {
      var div = document.querySelector("#download-canvas");
      let obj = {};
      if (div) {
        // 放大canvas，避免截图模糊
        const canvas = document.createElement("canvas");
        const scale = 3;
        const width = div.offsetWidth;
        const height = div.offsetHeight;
        canvas.width = width * scale;
        canvas.height = height * scale;
        // canvas.style = `transform:translate3d(0,0,0)`;//解决canvas绘图慢的原因
        obj.scale = scale;
        obj.canvas = canvas;
        obj.width = width;
        obj.height = height;
        obj.allowTaint = true;
        obj.useCORS = true;//图片跨域相关
      }
      html2canvas(div, obj)
        .then((canvas) => {
          console.log("htmlcanvas");
          const url = canvas.toDataURL("image/png"); // a标签的url对应图片base64'
          var imgs = url.replace(/^data:image\/\w+;base64,/, "");
          //this.getYearUploadImages(imgs);//调用的客户端api的方法
          // 创建a标签 并设置其相关属性，最后触发其点击事件
          //let a = document.createElement("a")
          //a.setAttribute("href", url)
          //a.setAttribute("download", 'img')
          //let clickEvent = new MouseEvent("click"); // 创建一个单击事件
          //a.dispatchEvent(clickEvent);
        })
        .catch((err) => {
          // on cancel
          console.log("----------err---------------");
          console.log(err);
        });
    },