js 图片预加载显示跨域

图片预加载因同源策略会报跨域，所以在预加载是需要加crossOrigin = 'Anonymous'
如下

let imgUrl ="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg"

// canvas 初始化调用图片预加载，预加载完成后拿到图片，之后渲染到canvas
this.startDownloadImg(imgUrl,(data)=>{
  console.log("加载成功")
})


methods: {
 startDownloadImg (imgUrl,callback) {
      let imageURL = imgUrl
      let downloadedImg = new Image()
      downloadedImg.crossOrigin = 'Anonymous'
      downloadedImg.src = imageURL
      downloadedImg.addEventListener('load', callback(downloadedImg), false)
    }  
}

如果还是跨域就看看阿里云的oss设置中配置允许跨域访问。

做完这两步如果还是无法绘制图片的话，那就要检查oss是否开启CDN加速缓存，如果开启CDN加速缓存的关掉CDN，或者在CDN的设置里配置缓存头Access-Control-Allow-Origin的值为“*”，这样不出意外就可以加载图片了