发现问题
最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base64 格式数据,用以上传到后台。由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑,因此这回一开始就机智的把 crossOrigin 属性值加上,代码大概如下:
const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.fillStyle = "black"; context.fillRect(0, 0, canvas.width, canvas.height); const imageElement = document.createElement("img"); imageElement.crossOrigin = "Anonymous"; imageElement.onload = () => { context.drawImage( imageElement, params.left, params.top, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height ); const dataUrl = canvas.toDataURL("image/jpeg", 1); } imageElement.src = 'xxx';
本以为万无一失,而在 Chrome 浏览器上面也非常顺利;然而到了 IE11 上,却出现了一个莫名其妙的 SecurityError 错误:
没有具体的报错信息,只通过提示定位到了执行 toDataURL 这一行,实在让人疑惑。
尝试
第一时间 Google 了一下,发现很多人遇到这个问题,但是并没有看到什么有效的解决办法,有些人建议使用 Fabric.js,但是看了一下觉得太麻烦了点。而在 caniuse 上,也明确标注了该方法在 IE11 上有问题。
看起来应该是 IE 上的一个 bug,于是想到了一个曲线救国的办法:获取图片 base64 数据的办法又不是只有一个,既然 toDataURL 方法支持不好,那就用别的办法:
- 先将 canvas 转成 blob
- 再用 FileReader 以 dataUrl 的方式读取
代码大概如下:
const reader = new FileReader(); reader.readAsDataURL(canvas.msToBlob()); reader.onloadend = () => { const base64data = reader.result; };
然而这并没有什么卵用....
这回轮到了 msToBlob 方法报了 SecurityError 错误。我:???
解决
看起来可能真的是安全原因,唯一的安全原因,只可能是跨域图片了。寻思着可能在 IE 上安全策略比较严格,即使设置了 crossOrigin = "Anonymous"
还是不让读数据,于是想到了另外一个思路,既然是因为跨域,那就把跨域因素去除:
- 使用 ajax 请求拿到图片的二进制数据
- 将二进制数据转为 base64 格式
- 将得到的 base64 数据作为图片元素的 src 设置并画到画布上
- 正常调用 toDataURL
代码大致如下: