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

可以用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 cancelconsole.log("----------err---------------");console.log(err);});},