位置: 编程技术 - 正文

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)

  • 医疗机构销售药品需要销售记录吗
  • 关于办理退税手续的通知
  • 增值税专用发票有效期是多长时间
  • 知道税额怎么算含税金额
  • 企业持有到期债券的风险
  • 预缴税款缴多了怎么办
  • 保障房异地建设费缴纳契税吗?
  • 用于在建工程的原材料进项税额可以抵扣吗
  • 商品销售赠送部分要交税吗
  • 私立幼儿园需要转学籍吗
  • 陈列费发票属于什么类型
  • 收到差额纳税的发票进项税能抵扣吗
  • 定期存款利息税是多少
  • 个税返还增值税申报表填哪里
  • 生产人员社保怎么做账
  • 汇兑结算方式可以分为
  • 网银企业证书年费入哪个科目
  • 小微企业需要税务登记吗
  • 玩游戏时切换窗口怎么弄
  • 事业单位福利发放时间
  • 资产负债表日后事项涵盖期间
  • windows server 2003 r2 序列号
  • php数组根据值排序
  • win10我无法更改某些设置
  • 官网下载的iso怎么用u盘安装
  • windows update更新错误
  • linux7 nfs
  • 小规模纳税人缴税标准是什么
  • 应收账款怎么做会计分录
  • php 文件上传类型限制
  • 受赠与获赠的区别
  • php编程技术
  • 不发放工资怎么办
  • php调试函数
  • 七个超级实用的手机
  • css字体溢出
  • 会计分录怎么分借方和贷方
  • vue3.0启动命令
  • JavaScript DOM API的使用
  • 客户不要的专票我们可以不作废吗
  • 员工体检费计入福利费吗
  • 备抵法账务处理方式
  • 铝合金门窗行业利润率
  • 报账单大写金额负数填写方式
  • PostgreSQL中调用存储过程并返回数据集实例
  • mysql子查询详解
  • 私车公用产生的费用如何入账
  • 公司间借款利息怎么开发票
  • 工程收到款项会计分录
  • 工厂加工费如何计算
  • 可抵扣进项税额的六种类型
  • 折价购买股权账务处理
  • 福利费为什么不可以抵扣进项税
  • 贴现法年末偿还金额
  • 发出存货的计价应当采用
  • 奖励员工购物卡怎么写
  • 发票已付款,可以开红字吗
  • 民间非盈利组织使用什么会计准则
  • 以现金支付办公用品费440元
  • 一家公司一定要有一个社保吗
  • Vista下以真正的管理员登陆的设置方法
  • windows7光盘安装
  • 浏览器8系统怎么打不开主页
  • ubuntu14.04挂载硬盘
  • win10系统打开图片内存忽大忽小
  • centos 6.0
  • win10锁屏界面的搜索怎么关
  • win7系统本地连接图标不见了
  • jquery.js
  • Node.js中的什么模块是用于处理文件和目录的
  • android开发范例实战宝典
  • 新版unity
  • jquery怎么给文本框赋值
  • dos判断变量是否为空
  • javascript 语言精粹(修订版)
  • bash shell脚本编程经典实例(第2版)
  • 请问在javascript程序中
  • 排污费属于什么费用科目
  • 2015年1毛硬币直径?
  • 招投标法实施条例是哪一年修正的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设