位置: 编程技术 - 正文
推荐整理分享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 转载请保留说明!友情链接: 武汉网站建设