实现思路：

1.html 转为canvas

2.canvas 转为图片

3.下载保存图片

1.html 转为canvas

方案1：可以使用canvas 绘制

方案2：使用插件 html2canvas

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

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)；

}