问题描述:
使用canvas绘制网图(http的图片) h5中在canvas中时出现如下错误,图片跨域
解决方案:
将需要绘制的网图转化为base64
base64转化方法:uniapp、vue、小程序、js图片转base64-CSDN博客
如下举例:
pathToBase64转base64方法
import {
pathToBase64,
base64ToPath
} from './index.js'
使用:
this.posterData.logo需要绘制的网图,base64是转换后的base64图片
pathToBase64(this.posterData.logo).then(base64 => {
ctx.drawImage(base64, avatar_x, avatar_y, avatar_width, avatar_height);
ctx.closePath()
ctx.restore();
})
至此就成功解决 h5中 canvas绘制图片跨域问题