一、解决图片样式错位问题,使用稳定版本 "html2canvas": "^1.0.0-rc.4",这个版本比较稳定,经测试大部分机型都适用.
二、html2canvas画布渲染后空白产生原因:
1、跨域(略)
2、使用的是网络图片
3、没有等待图片加载完成就调用了画板方法
如果使用的是网络图片http:// https:// 开头的,需要转成base64格式的,不要问为什么,转就是了
// 将图片转换为Base64
imageUrlToBase64(img) {
// 一定要设置为let,不然图片不显示
let image = new Image();
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
let imageUrl = img;
image.src = imageUrl;
// image.onload为异步加载
image.onload = () => {
this.getImage(image);
};
},
getImage(image) {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
// 这里的dataurl就是base64类型
let dataURL = canvas.toDataURL('image/jpeg', quality);
},
4、image.onload = () => {};这个方法很重要,也即等待图片加载完成的回调,完成后再去调用
html2canvas渲染画布的方法
<img
:src="tempimg"
@load="loadImage"
@error="errorLoad"
/>
loadImage () {
// 图片加载完成后调用画布方法
const canvasBody = document.getElementById('canvas_body')
const body = {
}
html2canvas(canvasBody, body).then((canvas) => {
const imgInfo = canvas.toDataURL('image/png')
if (this.callBack) this.callBack(imgInfo)
this.hiddenToast()
}).catch(err => {
console.error(err)
})
},