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

 更新时间:2017年11月19日 15:54:48   作者:陈某  
这篇文章主要给大家介绍了关于在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,但是看了一下觉得太麻烦了点。而在 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<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,最终的图片大小和初始的是相差不多的

总结

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

相关文章

  • JS+DIV实现鼠标划过切换层效果的方法

    JS+DIV实现鼠标划过切换层效果的方法

    这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • js实现快速分享功能(你的文章分享工具)

    js实现快速分享功能(你的文章分享工具)

    这是一款简单易用的文章分享工具,您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能,具体的实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-06-06
  • JS技巧动手实现红包兔子雨效果示例详解

    JS技巧动手实现红包兔子雨效果示例详解

    这篇文章主要为大家介绍了JS技巧动手实现红包兔子雨效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • js 数组倒序排列的具体实现

    js 数组倒序排列的具体实现

    有时候需要将数组类型变量内的元素颠倒一下顺序再输出,本文就详细的介绍一下,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • 能说明你的Javascript技术很烂的五个原因分析

    能说明你的Javascript技术很烂的五个原因分析

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言
    2011-10-10
  • 对于Javascript 执行上下文的全面了解

    对于Javascript 执行上下文的全面了解

    下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅析JavaScript中的特殊数据类型

    浅析JavaScript中的特殊数据类型

    在JavaScript中,有6大数据类型,分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型,需要的朋友参考下吧
    2017-12-12
  • 如何使用Javascript获取距今n天前的日期

    如何使用Javascript获取距今n天前的日期

    本篇文章是对使用Javascript获取距今n天前日期的实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • 一文详解PDF.js的使用及其跨域问题解决

    一文详解PDF.js的使用及其跨域问题解决

    PDF.js是一个JavaScript库,可在浏览器中无插件显示PDF,提供缩放、翻页、文本搜索等功能,下面这篇文章主要介绍了PDF.js的使用及其跨域问题解决的相关资料,需要的朋友可以参考下
    2025-04-04
  • 简单三步实现报表页面集成天气

    简单三步实现报表页面集成天气

    本文主要介绍了基于javascript实现报表页面集成天气的方法步骤,简单三步,一看就懂。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论