實(shí)現(xiàn)思路：

1.html 轉(zhuǎn)為canvas
2.canvas 轉(zhuǎn)為圖片
3.下載保存圖片

1.html 轉(zhuǎn)為canvas

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

我目前使用的是html2canvas插件,使用比較方便，可以將html直接轉(zhuǎn)換成canvas

插件見(jiàn)：http://html2canvas.hertzen.com/

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

注意：非本地圖片繪制存在跨域問(wèn)題，需要加上useCORS:true 配置

2.canvas轉(zhuǎn)為圖片
方案1：canvas 轉(zhuǎn)為base64

canvas.toDataURL("image/png"); 

注意點(diǎn)：這樣轉(zhuǎn)換的base64可能會(huì)太大，導(dǎo)致第三步下載保存圖片出錯(cuò)
方案2： canvas 轉(zhuǎn)為 Blob, 可以解決文件較大保存出錯(cuò)問(wèn)題

canvas.toBlob(function(blob){
  // 將blob 對(duì)象轉(zhuǎn)為url
  let downloadLink = URL.createObjectURL(blob);
})

3.下載保存圖片

長(zhǎng)按保存圖片功能，瀏覽器都自帶有，移動(dòng)端webview 不分安卓和IOS都帶有長(zhǎng)按保存圖片功能，所以一般我們只需要做到將html 轉(zhuǎn)換成圖片就可以了，webview是可以限制長(zhǎng)按保存功能的，在使用這個(gè)功能之前需要確定webview是否限制了，在我的項(xiàng)目中就有遇到webview限制長(zhǎng)按保存功能的情況，也有的webview需要調(diào)用app提供的接口來(lái)實(shí)現(xiàn)。

創(chuàng)建一個(gè)a標(biāo)簽設(shè)置download 屬性 ，觸發(fā)a標(biāo)簽的點(diǎn)擊事件,這種方式網(wǎng)上有很多人推薦，但是我的項(xiàng)目在app中都沒(méi)有調(diào)成功，但是在chrome中可以，這個(gè)需要根據(jù)項(xiàng)目具體情況來(lái)選擇。在chrome 中使用a標(biāo)簽下載的方式，圖片超過(guò)2mb，需要使用blob的方式

function saveImg(downloadLink,fileName){
   // 生成一個(gè)a元素
    var a = document.createElement('a')
    // 創(chuàng)建一個(gè)單擊事件
    var event = new MouseEvent('click')
    
    // 將a的download屬性設(shè)置為我們想要下載的圖片名稱(chēng)，帶上圖片類(lèi)型，如：test.png
    a.download = fileName; 
    // 將生成的URL設(shè)置為a.href屬性
    a.href = downloadLink;
    
    // 觸發(fā)a的單擊事件
    a.dispatchEvent(event)；
}