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

总结

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

(0)

相关推荐

  • 快速解决Canvas.toDataURL 图片跨域的问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res

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

    发现问题 最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base64 格式数据,用以上传到后台.由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑,因此这回一开始就机智的把 crossOrigin 属性值加上,代码大概如下: const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.fil

  • linux系统下部署项目访问报404错误的解决方法

    碰到了一个比较奇怪的问题,我在linux系统上安装了一个tomcat服务器,我将一个项目部署到了这个服务器上,然后我去访问这个tomcat,访问成功: 紧接着,我访问我部署项目的index.jsp页面,出现了404: 找了好久问题,最后发现当我把web.xml文件中的filter等注释掉后,可以正常访问: 注释掉后,我又访问了一下,是可以访问的: 暂时还没太明白这是什么问题,我又找了一个一样的项目,这次是可以访问的,具体原因还不清楚,本人觉得是文件权限问题,但是查了一下权限是一样的,可能和roo

  • PHPExcel在linux环境下导出报500错误的解决方法

    原先我导出为 XLSX 格式,用的是 $objWriter = IOFactory::createWriter($objPHPExcel, 'Excel2007'); 报错,纠结就纠结在,在开发环境和测试环境都没问题,放在生产环境直接 500 错误. 后来我改成导出 XLS 格式, $objWriter = IOFactory::createWriter($objPHPExcel, 'Excel5'); 问题解决了,具体为什么待有空了研究下!!! 以上这篇PHPExcel在linux环境下导出报

  • mysql启动服务报1058错误的解决方法

    今天研究一个框架,数据库使用mysql,启动mysql服务的时候报1058错误,如下图. 在网上找了半天都是一样的解决 办法,试了一遍通通不行(仅针对我本地服务启动出现的问题无效).网上解决办法如下:. 新启动,却无法启动. 解决方法: ◆1.运行 D:\mysql\bin>mysqld-nt -remove Service successfully removed. D:\mysql\bin>mysqld-nt -install Service successfully installed.

  • Win8.1下安装Python3.6提示0x80240017错误的解决方法

    Win8.1下安装Python3.6提示0x80240017错误,如何解决? 定位原因 缺少Windows补丁KB2999226 解决方法 到Microsoft Download Center下载所需要的补丁,但是可能出现此更新不适用于您的计算机的问题,下面提供几个处理的方法: 1.下载的补丁是32位还是64位,跟你的计算机是否匹配(x86代表32位,x64代表64位),若不匹配请回到官网下载相关补丁 2.Win8.1补丁更新必须按照以下顺序:KB2887595.KB2919442.KB2919

  • IIS 服务器下载apk文件报404错误的解决方法

    最近在使用IIS作为服务器的时候,apk文件已经上传到服务器上去了,但是无法下载,报404错误(没有找到),截图如下: 解决方案: 在iis管理器中增加MIME类型,如下图所示: 增加如图所示内容: 文件扩展名是:.apk,MIME类型是:application/octet-stream 也可以这样增加:文件扩展名:.apk MIME类型:application/vnd.android.package-archive 最后测试,问题解决.

  • MySQL下PID文件丢失的相关错误的解决方法

    今天同事A找到我,说是Mysql server X的负载很高,查询很慢.他自己捣鼓了一阵未果后,我们一起看了下. [root@redhat var]# uname -a Linux xxx 2.6.18-128.el5 #1 SMP Wed Dec 17 11:41:38 EST 2008 x86_64 x86_64 x86_64 GNU/Linux [root@redhat var]# mysql -u root -p -e "select version();" +--------

  • win7下docker安装与报错问题的解决方法

    安装Docker 1.下载docker 首先去官网docker地址去选择下载 2.安装的时候一直next下去,第二部可以改一下安装的路径自定义,后面会提示安装几个插件,同意就好. 3.安装完了出现finish,如果电脑安装过git中途可能报错不管就好. 4.这时候页面出现三个图标点击Docker Quickstart Terminal这个图标 5.可能提示未找到,如果没有弹出是否修复该图标(查找一下对应程序一般在C盘下面),如果实在没有第二方法直接去安装目录下面启动start.sh也是一样的 6

  • 关于安装LNMP集成包后上传图片报500错误的解决方法

    前言 lnmp 的全称是linux + nginx + mysql + php (国外喜欢简称为LEMP,搜英文资料需要搜LEMP),最近因为客户的网站需要部署到服务器上,根据目前流行的服务器,我选择了使用LNMP集成化的安装包,安装完成之后将代码部署到服务器之后,这时出现了一个问题,网站无法上传图片,并且出现了500的错误. 使用谷歌进行搜索发现大多数人遇到的问题和我遇到的都不一样,后来才知道是因为没有PHP中没有安装exif的扩展,下面就介绍一下如何安装该扩展.话不多说了,来一起看看详细的介

  • IIS部署asp.net报404错误的解决方法

    1).所建网站->(右键)权限->"ASP.NET计算机帐户"是否已添加. 2).所建网站->(右键)属性->ASP.NET选项卡->版本是否为2.0,不是则修改为2.0; 3).IIS->WEB服务扩展中->ASP.NETV2.0是否被禁止,若为禁止状态则启动; 4).所建网站->(右键)属性->主目录->执行权限是否为:纯脚本;应用程序池是否设置: 5).所建网站->(右键)属性->ASP.NET选项卡->

随机推荐