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

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

月光魔力鸭

2019-06-28 08:52 阅读 593 喜欢 0 canvas toDataURL

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 设置跨域才可以获取。

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

转载请注明出处: https://chrunlee.cn/article/bug-canvas-cross1.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
扩展程序中会有需要请求外部接口获取数据的时候,如果直接在JS中写的话,会跨域,但是谷歌扩展程序支持这种情况,只需要配置一下即可。
本篇文章以一个实际的小项目为主题进行从头到尾的讲解实现,该项目总计开发时长约6小时,主要是有很多页面或功能都是现成的,直接复制过来的,剩下的就调整下样式、字段内容等。
昨天客户发现了个小BUG,文章发布使用的ueditor, 上传视频的时候当时好好的,后来怎么就是播放不了?
ubuntu 配置nginx反向代理,这里简单记录下,后续再复习..
在程序中,会有需要后台一直运行的场景。这一节我们来做一个监控某网站的运行状态,如果没有运行,则改变当前的图标。
之前做了一段时间的上传相关的断点续传和秒传功能,这里整理下大体思路
上一章,我们学习和了解了websocket 是什么以及初始搭建,接下来,我们继续了解,如何进行广播以及对应的私聊呢。
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。