位置: 编程技术 - 正文
IE11下使用canvas.toDataURL报SecurityError错误的解决方法(日亚海淘官网)
编辑：rootadmin推荐整理分享IE11下使用canvas.toDataURL报SecurityError错误的解决方法(日亚海淘官网)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:日亚海淘官网,2012年腾讯股价多少,mft弹簧评测,ie11功能,ie11支持html5,ie11功能,7岁孩子为什么喜欢张嘴巴睡觉,7岁孩子为什么喜欢张嘴巴睡觉,内容如对您有帮助，希望把文章链接给更多的朋友！
发现问题
最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base 格式数据，用以上传到后台。由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑，因此这回一开始就机智的把 crossOrigin 属性值加上，代码大概如下：
本以为万无一失，而在 Chrome 浏览器上面也非常顺利；然而到了 IE 上，却出现了一个莫名其妙的 SecurityError 错误：
没有具体的报错信息，只通过提示定位到了执行 toDataURL 这一行，实在让人疑惑。
尝试
第一时间 Google 了一下，发现很多人遇到这个问题，但是并没有看到什么有效的解决办法，有些人建议使用 Fabric.js，但是看了一下觉得太麻烦了点。而在 caniuse 上，也明确标注了该方法在 IE 上有问题。
看起来应该是 IE 上的一个 bug，于是想到了一个曲线救国的办法：获取图片 base 数据的办法又不是只有一个，既然 toDataURL 方法支持不好，那就用别的办法：
先将 canvas 转成 blob 再用 FileReader 以 dataUrl 的方式读取代码大概如下：
然而这并没有什么卵用....
这回轮到了 msToBlob 方法报了 SecurityError 错误。我：？？？
解决
看起来可能真的是安全原因，唯一的安全原因，只可能是跨域图片了。寻思着可能在 IE 上安全策略比较严格，即使设置了 crossOrigin = "Anonymous" 还是不让读数据，于是想到了另外一个思路，既然是因为跨域，那就把跨域因素去除：
使用 ajax 请求拿到图片的二进制数据 将二进制数据转为 base 格式 将得到的 base 数据作为图片元素的 src 设置并画到画布上 正常调用 toDataURL代码大致如下：
尝试了一下，成功达到了目的。
后来查阅资料得知，如果 canvas 污染了，那无论是 toDataURL 还是 toBlob，都是无法执行成功的。
缺陷
虽然这个方法可以达到目的，但是却牺牲了性能。要先请求一次图片数据不说，数据编码的转换也是相当耗时的。小图还好，如果图片比较大，例如超过 3M ，那整个流程需要花费的时间可以达到一两分钟，这是不可接受的。
canvas的toDataUrl是否会压缩图像？
使用canvas的drawImage方法将image对象draw到canvas画布上时，图片大小会显著增加，并且只能保存为PNG格式。
将canvas用toDataUrl转化为base，即使encoderOptions设置为1，图片也会有较大幅度的减小，但是比起最初的image还是要大。如果encoderOptions使用默认的0.，最终的图片大小和初始的是相差不多的
总结
标签: 日亚海淘官网
本文链接地址:https://www.jiuchutong.com/biancheng/369830.html 转载请保留说明！上一篇：原生JavaScript实现Ajax异步请求(原生javascript开发)
下一篇：利用three.js画一个3D立体的正方体示例代码(three.js gui)
