/**
- htmlcanvas2 传入节点生成图片
*/
canvas canvas.toDataURL 图片太大会导致保存失败,解析出来的超出了浏览器对于url的限制 故使用canvas.toBlob
import html2canvas from 'html2canvas';
/**
* htmlcanvas2 传入节点生成图片
* @param {*} node 节点
*/
export function captureScreen(node) {
// 调用html2canvas插件
html2canvas(node, {
allowTaint: false,
foreignObjectRendering: true,
taintTest: false,
useCORS: true,//火狐浏览器添加项
}).then(canvas => {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判断是否是IE11
if (-1 !== userAgent.indexOf("Trident")) {
var arr = image.split(',');
var mime = arr[0].match(/: (.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
} else {
canvas.toBlob(function (blob) {
const eleLink = document.createElement('a');
eleLink.download = "img.png";
eleLink.style.display = 'none';
// 字符内容转变成blob地址
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}, 'image/png', 1);
}
})
}