html2canvas使用流程及爬坑
步骤
- 图片路径转base64
getImageBase64(imgurl) {
let _this = this
let img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.onload = function(){
let canvas = document.createElement("canvas")
canvas.width = 800
canvas.height = 800
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 800, 800);
let dataURL = canvas.toDataURL("image/jpeg");
_this.pictUrl = dataURL
}
img.src = imgurl
},
2、画图
document.getElementById('qrcode').innerHTML = ''; //清空画布
document.getElementById('saveimg').innerHTML = '';
window.scrollTo(0, 0); //防止左右滑动偏移
_this.qrcode('qrcode',QRCode.CorrectLevel.L);
setTimeout(function () {
let saveimg = document.getElementById('imgmain_box_');
html2canvas(saveimg,{
backgroundColor:'#ffffff' //画布背景色(其他样式)
}).then(function (canvas) {
let imgDataURI = canvas.toDataURL('image/jpeg');
let str = '<img src="'+imgDataURI+'" width="85%" />';
document.getElementById('saveimg').innerHTML = str;
});
},100)