最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base64 格式数据用以上传到后台。由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑因此这回一开始就机智的把 crossOrigin 属性值加上，代碼大概如下：

本以为万无一失而在 Chrome 浏览器上面也非常顺利；然而到了 IE11 上，却出现了一个莫名其妙的 SecurityError 错误：

没有具体的报错信息只通过提示定位到了执行 toDataURL 这一行，实在让人疑惑

第一时间 Google 了一下，发现很多人遇到这个问题但是并没有看到什么有效的解决办法，有些人建議使用 Fabric.js但是看了一下觉得太麻烦了点。而在 上也明确标注了该方法在 IE11 上有问题。
看起来应该是 IE 上的一个 bug于是想到了一个曲线救国的辦法：获取图片 base64 数据的办法又不是只有一个，既然 toDataURL 方法支持不好那就用别的办法：

看起来可能真的是安全原因，唯一的安全原因只可能是跨域图片了。寻思着可能在 IE 上安全策略比较严格即使设置了 crossOrigin = "Anonymous" 还是不让读数据，于是想到了另外一个思路既然是因为跨域，那就把跨域因素去除：

1. 使用 ajax 请求拿到图片的二进制数据

2. 将二进制数据转为 base64 格式

3. 将得到的 base64 数据作为图片元素的 src 设置并画到画布上

尝试了一下成功达到了目的。
后来查阅资料得知洳果 canvas 污染了，那无论是 toDataURL 还是 toBlob都是无法执行成功的。

虽然这个方法可以达到目的但是却牺牲了性能。要先请求一次图片数据不说数据編码的转换也是相当耗时的。小图还好如果图片比较大，例如超过 3M 那整个流程需要花费的时间可以达到一两分钟，这是不可接受的這里笔者暂时还没想到好的解决办法，各位看官如果有更好的思路还望告知。