云南龙网

  1. 首页 > 云知道 > >

IE11下使用canvas.toDataURL报SecurityError错误的解决方法

云知道

发现问题

最近在项目中用到了 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 = https://www.rkxy.com.cn/dnjc/’xxx’;【IE11下使用canvas.toDataURL报SecurityError错误的解决方法】本以为万无一失，而在 Chrome 浏览器上面也非常顺利；然而到了 IE11 上，却出现了一个莫名其妙的 SecurityError 错误：

IE11下使用canvas.toDataURL报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 = https://www.rkxy.com.cn/dnjc/reader.result;};然而这并没有什么卵用....

这回轮到了 msToBlob 方法报了 SecurityError 错误 。我：？？？
解决

看起来可能真的是安全原因，唯一的安全原因，只可能是跨域图片了 。寻思着可能在 IE 上安全策略比较严格，即使设置了 crossOrigin = "Anonymous" 还是不让读数据，于是想到了另外一个思路，既然是因为跨域，那就把跨域因素去除：
使用 ajax 请求拿到图片的二进制数据将二进制数据转为 base64 格式将得到的 base64 数据作为图片元素的 src 设置并画到画布上正常调用 toDataURL代码大致如下：
// 之前的代码// ...// 最后一行 imageElement.src = https://www.rkxy.com.cn/dnjc/’xxx’ 替换：getDataUrlBySrc(’xxx’).then(b64 = (imageElement.src = b64));function getDataUrlBySrc(src: string) { return new Promisestring((resolve, reject) = { if (Cache.localGet("isIE")) {const xmlHTTP = new XMLHttpRequest();xmlHTTP.open("GET", src, true);// 以 ArrayBuffer 的形式返回数据xmlHTTP.responseType = "arraybuffer";xmlHTTP.onload = function(e) {// 1. 将返回的数据存储在一个 8 位无符号整数值的类型化数组里面const arr = new Uint8Array(xmlHTTP.response);// 2. 转为 charCode 字符串const raw = Array.prototype.map.call(arr, charCode = String.fromCharCode(charCode)).join("");// 3. 将二进制字符串转为 base64 编码的字符串const b64 = btoa(raw);const dataURL = "data:image/jpeg;base64,"b64;resolve(dataURL);};xmlHTTP.onerror = function(err) {reject(err);};xmlHTTP.send(); } else {resolve(src); } });}尝试了一下，成功达到了目的 。

后来查阅资料得知，如果 canvas 污染了，那无论是 toDataURL 还是 toBlob，都是无法执行成功的 。
缺陷

虽然这个方法可以达到目的，但是却牺牲了性能 。要先请求一次图片数据不说，数据编码的转换也是相当耗时的 。小图还好，如果图片比较大，例如超过 3M，那整个流程需要花费的时间可以达到一两分钟，这是不可接受的 。

推荐阅读


上一篇：英文歌怎么学唱

下一篇：羽毛球引拍技巧