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

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

月光魔力鸭

2019-06-28 08:52 阅读 452 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
mysql数据库插入double类型确没有小数点
登录方式现在非常多,不过像我这种小站让用户自己注册基本是不可能的了,只能依赖现有的第三方的登录来集成,之前有集成github,不过这个太过针对性,这里准备集成QQ互联登录,慢慢记录下。
需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
写到这里,基本上就完成了我之前一篇文章中写的,我要做一个自己的图床的小程序了。在最初我要做图床的时候,发现在谷歌扩展程序上一无所知,所以才开始学习的这个,到这一步,至少能勉强能跑通自己的小程序了。