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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
百度地图API使用方法详解
2015/08/25 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中实现switch功能实例解析
2018/01/11 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
.net笔试题
2014/03/03 面试题
韩语专业本科生求职信
2013/10/01 职场文书
环境工程大学生自荐信
2013/10/21 职场文书
森林防火工作方案
2014/02/14 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
班主任对学生的评语
2014/04/26 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
支行行长竞聘报告
2014/11/06 职场文书