位置: 编程技术 - 正文

IE11下使用canvas.toDataURL报SecurityError错误的解决方法(日亚海淘官网)

编辑:rootadmin

推荐整理分享IE11下使用canvas.toDataURL报SecurityError错误的解决方法(日亚海淘官网),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:日亚海淘官网,2012年腾讯股价多少,mft弹簧评测,ie11功能,ie11支持html5,ie11功能,7岁孩子为什么喜欢张嘴巴睡觉,7岁孩子为什么喜欢张嘴巴睡觉,内容如对您有帮助,希望把文章链接给更多的朋友!

发现问题

最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base 格式数据,用以上传到后台。由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑,因此这回一开始就机智的把 crossOrigin 属性值加上,代码大概如下:

本以为万无一失,而在 Chrome 浏览器上面也非常顺利;然而到了 IE 上,却出现了一个莫名其妙的 SecurityError 错误:

没有具体的报错信息,只通过提示定位到了执行 toDataURL 这一行,实在让人疑惑。

尝试

第一时间 Google 了一下,发现很多人遇到这个问题,但是并没有看到什么有效的解决办法,有些人建议使用 Fabric.js,但是看了一下觉得太麻烦了点。而在 caniuse 上,也明确标注了该方法在 IE 上有问题。

看起来应该是 IE 上的一个 bug,于是想到了一个曲线救国的办法:获取图片 base 数据的办法又不是只有一个,既然 toDataURL 方法支持不好,那就用别的办法:

先将 canvas 转成 blob 再用 FileReader 以 dataUrl 的方式读取

代码大概如下:

IE11下使用canvas.toDataURL报SecurityError错误的解决方法(日亚海淘官网)

然而这并没有什么卵用....

这回轮到了 msToBlob 方法报了 SecurityError 错误。我:???

解决

看起来可能真的是安全原因,唯一的安全原因,只可能是跨域图片了。寻思着可能在 IE 上安全策略比较严格,即使设置了 crossOrigin = "Anonymous" 还是不让读数据,于是想到了另外一个思路,既然是因为跨域,那就把跨域因素去除:

使用 ajax 请求拿到图片的二进制数据 将二进制数据转为 base 格式 将得到的 base 数据作为图片元素的 src 设置并画到画布上 正常调用 toDataURL

代码大致如下:

尝试了一下,成功达到了目的。

后来查阅资料得知,如果 canvas 污染了,那无论是 toDataURL 还是 toBlob,都是无法执行成功的。

缺陷

虽然这个方法可以达到目的,但是却牺牲了性能。要先请求一次图片数据不说,数据编码的转换也是相当耗时的。小图还好,如果图片比较大,例如超过 3M ,那整个流程需要花费的时间可以达到一两分钟,这是不可接受的。

canvas的toDataUrl是否会压缩图像?

使用canvas的drawImage方法将image对象draw到canvas画布上时,图片大小会显著增加,并且只能保存为PNG格式。

将canvas用toDataUrl转化为base,即使encoderOptions设置为1,图片也会有较大幅度的减小,但是比起最初的image还是要大。如果encoderOptions使用默认的0.,最终的图片大小和初始的是相差不多的

总结

标签: 日亚海淘官网

本文链接地址:https://www.jiuchutong.com/biancheng/369830.html 转载请保留说明!

上一篇:原生JavaScript实现Ajax异步请求(原生javascript开发)

下一篇:利用three.js画一个3D立体的正方体示例代码(three.js gui)

  • 什么公司需要缴纳印花税
  • 有谁用过金蝶kis云专业版
  • 国库券利息收入计入利润总额吗
  • 实收资本一直挂着其他应收款怎么办
  • 食品增值税发票需要交税吗
  • 内账固定资产已经费用化了怎么办
  • 服装企业销售方式
  • 应收账款确认无法收回分录
  • 增值税专用发票怎么开
  • 可抵扣增值税的发票
  • 以前年度损益调整科目怎么用
  • 进项税转出的附加税怎么做
  • 报关单上金额要和合同上一样吗
  • 个人保证金业务
  • 个人去税务局开劳务费税率
  • 技术服务发票是劳务发票吗
  • 利润表中所得税费用为负数是什么意思
  • 增值税发票过期了税金怎么办
  • 旧发票专用章如何处理
  • 集团控股公司
  • 企业税收风险有哪些方面
  • 外单位人员能在单位借款吗
  • 财产收购的税务处理
  • 怎么导出全年开奖记录
  • 民办非企业所得税免税政策
  • 分公司银行开户需要章程吗
  • 福利费专票进项转出怎么做账
  • 会员充值增送如何取消
  • 贴现到期不获付款
  • 公司补缴印花税的后果
  • 事业单位财政拨款是编制吗
  • 销售折扣单独开票
  • 固定资产折旧方法的选择
  • 月末账务结转
  • 外资企业股权转让给外资企业
  • 对外投资概述
  • 租用办公设备
  • 如何使用axios直接发送GET请求
  • 前期认证相符
  • 律师事务所可不可以对外投资呢
  • 应付账款和预付账款的会计分录
  • 应交税费中印花税是什么
  • 电脑自学网站推荐
  • mongodb修改命令
  • 销售防疫物资是什么意思
  • 什么情况需要预缴
  • 单位全额承担社保能税前扣除吗
  • win2008 enterprise R2 x64 中安装SQL server 2008的方法
  • 企业所得税营业外收入
  • 以前年度应收账款贷方余额如何调整
  • 不动产进项税额不再分两年抵扣
  • 应收票据周转率公式
  • 用承兑付货款怎么做会计
  • 谈一谈企业应如何做才能更好地、有效地激励员工
  • 保教费免征增值税政策
  • 公允价值变动损益和投资收益区别
  • 老板在自己的公司做事
  • 在计划管理中根据事实思考这一步的内容是
  • 成本暂估入帐如何做分录
  • 互联网代记账业务
  • 什么是商业企业和工业企业
  • 如何在苹果电脑上下载软件
  • 苹果电脑安装中国银行网银助手
  • mac新版系统
  • win8查看系统版本
  • 平板电脑安装的是什么格式的软件
  • cocos creator截图
  • Ver、Vol、Ctty命令的使用教程
  • 在生成目录之前必须对相关文字设置样式
  • 浅谈会计诚信与职业道德论文
  • Node.js中的construct构造函数
  • Python selenium爬取table
  • Python内置的HTTP协议服务器SimpleHTTPServer使用指南
  • 超精准的电压基准芯片
  • jquery的ajax提交form表单的两种方法小结(推荐)
  • 国家税务局涉税信息公开
  • 一般纳税人如何开具3%的发票
  • 发票被暂停了严重吗
  • 贵州税务发票流向查询
  • 资源税谁缴纳
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设