最近在做功能的时候，遇到一个问题，用canvas合成图片做展示，本地的图片都没问题，从第三方倒过来的图一直在报跨域的错误，本姑娘真的尝试了各种方法，比如设置crossOrigin， 加随机数，在服务器添加跨域头等等，无奈问题一直没有得到解决，当然，crossOrigin和随机数是要加的，不然在图片toDataUrl的时候也会报错，但是一直没有解决我的问题
最后跟后台开发商量之后得出解决方案，把第三方图片通过php处理，然后直接输出图片，就可以使用，需要注意的是在请求后台的时候需要用encodeURIComponent转码，不然碰到图片链接里带%号的就呵呵了
处理代码如下
let url = encodeURIComponent('图片地址.jpg')
this.toDataURL(`后台接口地址.php?url=${url}`, function(dataUrl) {
self.dataUrl = dataUrl
})
toDataURL(src, callback, outputFormat) {
var img = new Image()
img.crossOrigin = 'Anonymous'
img.src = src + '&timeStamp=' + new Date()
img.onload = function() {
var canvas = document.createElement('CANVAS')
var ctx = canvas.getContext('2d')
var dataURL
canvas.height = this.naturalHeight
canvas.width = this.naturalWidth
ctx.drawImage(this, 0, 0)
dataURL = canvas.toDataURL(outputFormat)
callback(dataURL)
}
// 图片加载错误
img.onerror = function(e) {
console.log('错误', e)
}
if (img.complete || img.complete === undefined) {
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
img.src = src
}
}
toDataURL里的操作可以按照自己的需求来写，反正把你受到跨域限制的那张图片名称.jpg换成跟后台协商好的地址就行，之后就可以愉快的玩耍了
如果大神们有其他解决办法，跪求告知！！！！！！！！！
