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 = 'xxx';

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

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

尝试

第一时间 google 了一下，发现很多人遇到这个问题，但是并没有看到什么有效的解决办法，有些人建议使用 fabric.js，但是看了一下觉得太麻烦了点。而在 上，也明确标注了该方法在 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

代码大致如下：

// 之前的代码
// ...
// 最后一行 imageelement.src = 'xxx' 替换：
getdataurlbysrc('xxx').then(b64 => (imageelement.src = b64));

function getdataurlbysrc(src: string) {
 return new promise<string>((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 ，那整个流程需要花费的时间可以达到一两分钟，这是不可接受的。

canvas的todataurl是否会压缩图像？

使用canvas的drawimage方法将image对象draw到canvas画布上时，图片大小会显著增加，并且只能保存为png格式。

将canvas用todataurl转化为base64，即使encoderoptions设置为1，图片也会有较大幅度的减小，但是比起最初的image还是要大。如果encoderoptions使用默认的0.92，最终的图片大小和初始的是相差不多的

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。