h5基于html2canvas实现保存图片到手机相册

需求：一个页面进来有多个用户的二维码门票信息，产品需要求底部有个保存图片的按钮，直接将html生成长图进行保存

首先说明：在H5中，无法实现一键保存的功能。只能通过h5自带的长按保存实现

实现思路：

首先通过html2canvas通过截图将html转为canvas长图，然后在通过将html2canvas生成的图片信息覆盖在原有的页面上，这样用户在长按的时候其实按住的就是长图了，然后就能保存。

步骤一：安装html2canvas

npm install html2canvas
 or
yarn add html2canvas

步骤二：引入html2canvas及使用

import html2canvas from "html2canvas";

//html代码
<div id="qrcode" ref="qrcodeBox" class="detail-wrap">
    // 内容区域
</div>

下面的代码中使用setTimeout是因为在需求中还需要渲染二维码的图片，添加 setTimeout是为了等二维码渲染出来，当然这不是最好的解决办法，后续有更好的解决办法再去修改

// 转成图片
    toImage() {
      let i