最近在项目中用到了 canvas
的 toDataURL
方法来获取图片的 base64
格式数据用以上传到后台。由于之前也遇到过 canvas
被跨域图片污染不能获取数据的坑因此这回一开始就机智的把 crossOrigin
属性值加上,代碼大概如下:
本以为万无一失而在 Chrome 浏览器上面也非常顺利;然而到了 IE11 上,却出现了一个莫名其妙的 SecurityError
错误:
没有具体的报错信息只通过提示定位到了执行 toDataURL
这一行,实在让人疑惑
第一时间 Google 了一下,发现很多人遇到这个问题但是并没有看到什么有效的解决办法,有些人建議使用 Fabric.js但是看了一下觉得太麻烦了点。而在 上也明确标注了该方法在 IE11 上有问题。
看起来应该是 IE 上的一个 bug于是想到了一个曲线救国的辦法:获取图片 base64
数据的办法又不是只有一个,既然 toDataURL
方法支持不好那就用别的办法:
看起来可能真的是安全原因,唯一的安全原因只可能是跨域图片了。寻思着可能在 IE 上安全策略比较严格即使设置了 crossOrigin = "Anonymous"
还是不让读数据,于是想到了另外一个思路既然是因为跨域,那就把跨域因素去除:
-
使用
ajax
请求拿到图片的二进制数据 -
将二进制数据转为
base64
格式 -
将得到的
base64
数据作为图片元素的src
设置并画到画布上
尝试了一下成功达到了目的。
后来查阅资料得知如果 canvas
污染叻,那无论是 toDataURL
还是 toBlob
都是无法执行成功的。
虽然这个方法可以达到目的但是却牺牲了性能。要先请求一次图片数据不说数据编码的转換也是相当耗时的。小图还好如果图片比较大,例如超过 3M 那整个流程需要花费的时间可以达到一两分钟,这是不可接受的这里笔者暫时还没想到好的解决办法,各位看官如果有更好的思路还望告知。