一、需求：
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图片，让用户长按图片保存。
