一、解决图片样式错位问题，使用稳定版本"html2canvas": "^1.0.0-rc.4"，这个版本比较稳定，经测试大部分机型都适用.
二、html2canvas画布渲染后空白产生原因：
1、跨域（略）
2、使用的是网络图片
3、没有等待图片加载完成就调用了画板方法
如果使用的是网络图片http:// https:// 开头的，需要转成base64格式的，不要问为什么，转就是了
// 将图片转换为Base64imageUrlToBase64(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)})},
