BUG-canvas.toDataURL-Tainted canvases may not be exported

BUG 报错Tainted canvases may not be exported 。 在通过canvas 调用 toDataURL的时候出现的问题。

Tainted canvases may not be exported

出现原因： 在通过canvas drawImage 的时候，图片地址使用的是其他服务器的图片，与当前系统不是同源的，所以会在获得url的时候会因为跨域导致报错。

解决方法

在图片加载前，先设置跨域。

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'xxx';
img.onload = function(){
    ctx.drawImage(this,0,0,this.width,this.height);
}

这个设置完成后，对应的图片获取的服务端也要设置跨域，不然图片加载还是会不报错的。

解决方法2

getURLBase64 : function(url) {
                return new Promise((resolve, reject) => {
                    var xhr = new XMLHttpRequest()
                    xhr.open('get', url, true)
                    xhr.responseType = 'blob'
                    xhr.onload = function() {
                        console.log(this);
                        if (this.status === 200) {
                            var blob = this.response
                            var fileReader = new FileReader()
                            fileReader.onloadend = function(e) {
                                var result = e.target.result
                                resolve(result)
                            }
                            fileReader.readAsDataURL(blob)
                        }
                    }
                    xhr.onerror = function() {
                        reject()
                    }
                    xhr.send()
                })
            }

将图片通过base64的方式获得，然后设置给图片即可。当然这种情况也需要nginx 设置跨域才可以获取。

这样一看的话，还是第一种更简单方便。