位置: 编程技术 - 正文

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)

  • 盈余公积发放现金股利分录怎么写
  • 不知道进价怎么求利润
  • 包工包料工程要交哪些税
  • 事业单位注销税务登记
  • 利润分配包括缴纳所得税吗
  • 去年购进的货物今年才收到发票
  • 境内企业借外债最新政策出台
  • 预缴增值税 已交税金
  • 企业有美金收入吗
  • 别人垫付的医药费,可以报销吗
  • 远程认证是什么意思
  • 印花税如何进行税种认定
  • 广告公司怎样
  • 资产负债表本期盈余是负数怎么办
  • 投资股权投资基金算不算利好
  • 申报的国家资助的一个项目如何进行账务处理?
  • 增值税抄税报税流程2021
  • 工会残保金必须缴纳吗
  • 美金收入 如何交税
  • 个体户生产经营所得怎么报税
  • 如何整理流水账目
  • 怎么安装win7系统后怎么安装驱动
  • 华为鸿蒙harmonyos官网4.0升级
  • 政府的奖励金计入哪个科目
  • 房地产开发企业销售自行开发的房地产项目
  • 劳务公司给包工头打款备注写什么
  • 企业进项税大于销项税财务怎么做分录
  • 劳务费发票差额征税
  • 查看ls命令的使用手册
  • 帝国cms app
  • 预支工资的借条图片
  • 财务章有几种样式
  • 查补税款
  • 发票校验码二维码看不到了怎么查
  • 什么是固定资产?其特征有哪些
  • 增值税为什么不能在税前扣除
  • 驱动开发做得长久吗
  • 房地产公司土地计入什么科目
  • Qt Port of WebKit ¶
  • 广播影视服务税率2023
  • 金蝶系统结账之后反结账
  • 水电费用属于会计的什么费用
  • 生产部门包括
  • sqlserver 数据库加密
  • 公司报销金额有限制吗
  • 公司缴纳的残保金是什么
  • 限定性净资产包括哪三个方面
  • 医药发票的税率是多少
  • 固定资产清理借方登记的项目
  • 信息技术服务费属于什么费用
  • 收到招聘费发票怎么做账
  • 房地产企业抵押借款
  • 内账外账用一个云盘可以吗
  • 动态创建表
  • 系统图工具
  • 如何快速找到注册的软件
  • apache zipfile
  • swimsuitnetwork.exe - swimsuitnetwork是什么进程 有何作用
  • win10rs2是哪个版本
  • 苹果发布首款MR头显
  • app塔防游戏
  • python下三角
  • perl 读文件
  • nodejs制作网站
  • nodejs发送post请求socket hand up
  • vue.js打包部署
  • unity平面透明
  • fiori开发
  • 深入理解中国式现代化
  • 时间戳的差值
  • python socketcan
  • mapper--图片热点区域高亮组件官方站点
  • 税务非正常户解除申请怎么写
  • 北京市国家税务局
  • 集资房税收问题
  • 减免性质代码怎么会自动选择
  • 上海房屋出租交税
  • 保险赔款是免征还是不征?
  • 报纸的增值税税率
  • 2018建筑材料考试试题及答案河南卷
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设