一、需求：
1、h5頁面點擊一個保存按鈕，下載對應的圖片
↑ 保存圖片的按鈕 ↑
2、下載的這張圖片是用 html2canvas 轉換過來的
↑ 這是要保存的目標HTML頁面 ↑
二、實現
1、目標HTML頁面默認狀態是隱藏的，在點擊保存按鈕之后才將目標頁面顯示出來（不能真的顯示出來，z-index設置成負值，這樣從視覺上就看不到這個頁面）
#save-code {
width: 100vw;
height: 100vh;
background-color: #3ba1f4;
box-sizing: border-box;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
↑ 目標HTML頁面CSS ↑
2、然后調用html2canvas的方法將html頁面轉為canvas，再將canvas轉blob轉url，最后將url賦值到a標簽href屬性
$("#save-code").css('display', 'block') // 顯示目標HTML頁面
// HTML轉canvas
html2canvas(document.querySelector("#save-code"), {
useCORS: true,
}).then(canvas => {
$("#save-code").css('display', 'none') // 隱藏目標HTML頁面
convertCanvasToImg(canvas) // canvas轉圖片
})
function convertCanvasToImg(canvas) {
// canvas轉base64 轉 blob
var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
// blob轉URL對象
myUrl = URL.createObjectURL(myBlob)
// 創建a標簽，下載圖片
downImg(myUrl)
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function downImg(url) {
// 創建a標簽 並設置其相關屬性，最后觸發其點擊事件
let a = document.createElement("a")
let clickEvent = document.createEvent("MouseEvents");
a.setAttribute("href", url)
a.setAttribute("download", 'codeImg')
a.setAttribute("target", '_blank')
clickEvent.initEvent('click', true, true)
a.dispatchEvent(clickEvent);
}
3、有一些問題
在部分手機上會下載圖片失敗.在使用Chrome內核的手機瀏覽器上，版本過低會導致下載失敗，如UC等。在Safari內核的手機瀏覽器上沒有問題，如：iphone、華為等。可以獲取手機瀏覽器信息：
var agent = getBrowserInfo()
alert(agent)
// 獲取瀏覽器信息
function getBrowserInfo() {
var agent = navigator.userAgent.toLowerCase();
var regStr_ie = /msie [\d.]+;/gi;
var regStr_ff = /firefox\/[\d.]+/gi
var regStr_chrome = /chrome\/[\d.]+/gi;
var regStr_saf = /safari\/[\d.]+/gi;
//IE11以下
if (agent.indexOf("msie") > 0) {
return agent.match(regStr_ie);
}
//IE11版本中不包括MSIE字段
if (agent.indexOf("trident") > 0 && agent.indexOf("rv") > 0) {
return "IE " + agent.match(/rv:(\d+\.\d+)/)[1];
}
//firefox
if (agent.indexOf("firefox") > 0) {
return agent.match(regStr_ff);
}
//Chrome
if (agent.indexOf("chrome") > 0) {
return agent.match(regStr_chrome);
}
//Safari
if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
return agent.match(regStr_saf);
}
}
結合MDN瀏覽器兼容：
可以這樣處理是：Chrome高版本的瀏覽器和Safari瀏覽器，點擊保存按鈕時正常保存，否則顯示出canvas轉的img圖片，讓用戶長按圖片保存。