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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
Vue简单实现原理详解
May 07 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
银行会计业务的个人自我评价
2013/11/02 职场文书
小学生家长寄语
2014/04/02 职场文书
门店业绩提升方案
2014/06/08 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书