使用画图 页面上链接图片报了跨域问题,控制台报跨域问题
解决方法
<img :src="detailInfo.avatarUrl" class="avatarUrl" crossorigin="anonymous"/>
// 生成二维码
getCode() {
const text = this.detailInfo.shareLink
const canvas = document.getElementById('businessCardCanvas')
QRCode.toCanvas(
canvas,
text,
{
toSJISFunc: QRCode.toSJIS,
width: 150,
height: 150,
correctLevel: 'H'
},
function (error) {
if (error) console.error(error)
}
)
let imgs = document.getElementById('imgs')
if(imgs){
imgs.appendChild(Canvas2Image.convertToImage(canvas, 150, 150, 'png'))
this.$nextTick(() => {
this.businessCardImg = imgs.querySelector('img').getAttribute('src')
this.$emit('getImgSrc', this.businessCardImg)
})
}
}
重点:
- img标签的crossorigin=“anonymous”
- useCORS: true
以上2个属性缺一不可
方式二:
将图片转成base64格式也能解决
urlToBase64(url) {
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图片插入画布并开始绘制
canvas.getContext("2d").drawImage(image, 0, 0);
// result
let result = canvas.toDataURL("image/png");
resolve(result);
};
// CORS 策略,会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
image.setAttribute("crossOrigin", "Anonymous");
image.src = url;
// 图片加载失败的错误处理
image.onerror = () => {
reject(new Error("urlToBase64 error"));
};
});
}
使用:
const imgUrL = this.detailInfo.avatarUrl
this.urlToBase64(imgUrL).then((res) => {
// 使用转化后的base64图片地址,不然会产生跨域问题
this.imgUrL = res
});