解决在 IE11 下使用 canvas.toDataURL 报 SecurityError 的问题

SHERlocked93 发布于2019-08-21 17:42 / 2997人阅读

摘要：问题最近在项目中用到了的方法来获取图片的格式数据，用以上传到后台。而在上，也明确标注了该方法在上有问题。我解决看起来可能真的是安全原因，唯一的安全原因，只可能是跨域图片了。要先请求一次图片数据不说，数据编码的转换也是相当耗时的。

问题

最近在项目中用到了 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

代码大致如下：

// 之前的代码
// ...
// 最后一行 imageElement.src = "xxx" 替换：
getDataUrlBySrc("xxx").then(b64 => (imageElement.src = b64));

function getDataUrlBySrc(src: string) {
  return new Promise((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 ，那整个流程需要花费的时间可以达到一两分钟，这是不可接受的。这里笔者暂时还没想到好的解决办法，各位看官如果有更好的思路，还望告知。

云服务器 GPU云服务器 RDLC报表在IE10下的问题如何解决兼容问题?Win11仅支持1个I ie11的excel导出 webrtc在webview中使用问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89884.html

同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

Achilles 2019-08-29 11:29 评论0 收藏0
同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

ideaa 2019-08-21 14:41 评论0 收藏0
同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

Seay 2019-08-01 15:52 评论0 收藏0
canvas.toDataURL('image/png')报错处理方法

摘要：前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是用来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。部分代码如下： var testVideo = document....

idisfkj 2019-08-21 15:55 评论0 收藏0