解决思路:前端将网络图片转换成64位格式
不需要设置什么阿里云服务器跨域,nginx配置header等等
1、准备一个canvas标签用于转换64位格式图片
<canvas ref="headCanvas" style="position: absolute;height: 0; width: 0;opacity: 0;"></canvas>
2、关键方法
注意:一点要给网络图片手动添加在后面拼接时间戳,否则canvas.toDataURL方法会报错
//将网络图片转化为Base64
ImageToBase64() {
let vm = this
//一定要设置为let,不然图片不显示,下面解释↓
let image = new Image();
//解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
//this.invincibleData.thumb这里是网络图片路径,
//比如:https://down.yantongtech.cn/data/upload/images/2021-03-29/8567a979ba7ab9fd94e49866f095b9e5.jpg?1617081289278
image.src = this.invincibleData.thumb;
//image.onload为异步加载
image.onload = () => {
var canvas = vm.$refs.headCanvas;
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
var dataurl = canvas.toDataURL("image/png");
//得到64位格式
this.invincibleData.thumb64 = dataurl
}
},
3、网络图片成功转换成64位图片之后,在使用html2canvas的时候,完美解决图片空白或图片跨域,有疑问欢迎评论交流