已解决图片跨域的问题
一、引包
npm install --save html2canvas
二、导入
import html2canvas from 'html2canvas'
三、使用
kssstart () {
// mymap你要截取的元素 也可以是body 整个页面 **
let canvasID = this.$refs.mymap;
let that = this;
let a = document.createElement('a');
html2canvas(canvasID, {useCORS:true, scrollY:0,removeContainer:false}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
a.setAttribute("download", "res.png")
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
dataURLToBlob(dataurl) {//ie 图片转格式
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})
},
