问题描述:
后台返回了一个二进制图片的url,这个url跨域了,(但是使用img标签可以加载出来)
报错信息如下图:
解决方案:
使用js操作图片,通过canvas绘制后转成base64,再把base64进行绘制
主要代码如下:
//根据下载地址转换成base64图片
export function downloadIamge(imgsrc) {
return new Promise((resolve, reject) => {
try {
var url = "";
var image = new Image();
image.src = imgsrc;
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
resolve({
url:url,
width:canvas.width,
height:canvas.height
})
};
} catch (e) {
reject();
}
});
}
import { downloadIamge } from "@/utils/index.js";
downloadIamge(ress.data.recordUrl).then(res=>{
//res.url即为base64图片,接着做后续的操作就可以
})
注意事项:
由于image.onload是个异步函数,所以必须等此函数执行完才会产生所需要的url,否则返回的url就是空
解决异步方法:promise