h5长按保存图片

实现思路：

1.html 转为canvas
2.canvas 转为图片
3.下载保存图片

1.html 转为canvas

方案1：可以使用canvas 绘制
方案2：使用插件 html2canvas

我目前使用的是html2canvas插件,使用比较方便，可以将html直接转换成canvas

插件见：http://html2canvas.hertzen.com/

let dom = document.getElementById('id');
html2canvas(dom,{ useCORS:true}).then((canvas)=> {
  document.body.appendChild(canvas);
});

注意：非本地图片绘制存在跨域问题，需要加上useCORS:true 配置

2.canvas转为图片
方案1：canvas 转为base64

canvas.toDataURL("image/png"); 

注意点：这样转换的base64可能会太大，导致第三步下载保存图片出错
方案2： canvas 转为 Blob, 可以解决文件较大保存出错问题

canvas.toBlob(function(blob){
  // 将blob 对象转为url
  let downloadLink = URL.createObjectURL(blob);
})

3.下载保存图片

长按保存图片功能，浏览器都自带有，移动端webview 不分安卓和IOS都带有长按保存图片功能，所以一般我们只需要做到将html 转换成图片就可以了，webview是可以限制长按保存功能的，在使用这个功能之前需要确定webview是否限制了，在我的项目中就有遇到webview限制长按保存功能的情况，也有的webview需要调用app提供的接口来实现。

创建一个a标签设置download 属性 ，触发a标签的点击事件,这种方式网上有很多人推荐，但是我的项目在app中都没有调成功，但是在chrome中可以，这个需要根据项目具体情况来选择。在chrome 中使用a标签下载的方式，图片超过2mb，需要使用blob的方式

function saveImg(downloadLink,fileName){
   // 生成一个a元素
    var a = document.createElement('a')
    // 创建一个单击事件
    var event = new MouseEvent('click')
    
    // 将a的download属性设置为我们想要下载的图片名称，带上图片类型，如：test.png
    a.download = fileName; 
    // 将生成的URL设置为a.href属性
    a.href = downloadLink;
    
    // 触发a的单击事件
    a.dispatchEvent(event)；
}