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


Posted in Javascript onNovember 19, 2017

发现问题

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

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 = 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,最终的图片大小和初始的是相差不多的

总结

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

Javascript 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
Javascript函数的参数
Jul 16 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
vue axios 二次封装的示例代码
Dec 08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
微信小程序如何使用globalData的方法
Jun 06 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
使用DataTable插件实现异步加载数据
Nov 19 #Javascript
原生JavaScript实现Ajax异步请求
Nov 19 #Javascript
gulp安装以及打包合并的方法教程
Nov 19 #Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 #Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 #Javascript
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python复制文件的方法实例详解
2015/05/22 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
社会实践感言
2014/01/25 职场文书
军训自我鉴定100字
2014/02/13 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
会计员岗位职责
2014/03/15 职场文书
会员卡清退活动总结
2014/08/27 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js