proxy本地代理访问图片解决跨域问题
devServer.proxy代理
devServer: {
port: 8001,
proxy: {
'/busy': {
target: 'http://beijing-image.oss-cn-beijing.aliyuncs.com/',
changeOrigin: true,
pathRewrite: {
'^/busy': '/busy'
}
}
}
接口访问图片
getImage(url) {
return axios({ method: 'get', url: '/busy' + url,responseType: 'blob'})
}
// 接口调用
let url = this.specialImg.split('busy')[1];
getImage(url).then(res => {
// 将blob转为链接
const myBlob = new Blob([res.data], { type: "image/jpeg" });
let src = window.URL.createObjectURL(myBlob)
})
canvas绘制
let image = new Image();
image.crossOrigin = 'anonymous';
image.style = `width: ${w}px;height:${h}px`;
let imageData = {};
image.onload = function() {
ctx.drawImage(image, 0, 0);
}
image.src = src;