位置: 编程技术 - 正文

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)

  • 视同销售增值税申报表怎么填写
  • 小规模季度不超30万需要交什么税
  • 旅客运输服务解释
  • 金税四期可以查个人账户吗
  • 房地产老项目简易计税方法备案
  • 清算后剩余财产归一方所有
  • 小规模所得税税负率怎么计算
  • 银行付款回单怎么看
  • 没有报关单货物违法吗
  • 公司给离职员工多发工资怎么办
  • 业务活动费用和行政支出
  • 损益表上的数据怎么看
  • 城市规划部门收取的市政建设配套费是否作为契税的征税基数
  • 增值税发票丢了怎么补开
  • 固定资产的折旧费用计入什么科目
  • 预缴工程税的帐务处理如何做?
  • 医院其他收入包括哪些项目
  • 营改增劳务派遣
  • 商品税目编码表查询
  • 建安企业劳务成本怎么入账
  • 作进项税转出
  • 银行代收费业务会计分录
  • 资产负债率怎么计算
  • 进项税和销项税怎么理解
  • 职工福利费汇算清缴怎么填写
  • 新会计规定工会会计制度
  • 小规模纳税人多久缴纳一次增值税
  • 应发工资扣税
  • 房地产公司土地在资产负债表列入
  • 新罕布什尔州的邮政编码
  • 深红玫瑰鹦鹉多钱一个
  • php自定义字段
  • 建筑工程甲方公司
  • php字符串定义
  • php如何上传文件
  • 员工预支款计入什么科目
  • 融资租赁租入固定资产是什么意思
  • 应交税费如何调整
  • python dayup
  • 什么是印花税,怎么征收
  • python 索引-1
  • python继承例子
  • mongodb介绍
  • 还款利息
  • 以前未入账固定资产补入账
  • 开票软件怎样
  • 机动车统一发票怎么开
  • 小规模纳税人转一般纳税人当月如何申报
  • 防暑降温费计入工资还是福利费
  • 交易性金融资产属于流动资产
  • 研究开发费用加计扣除最新政策
  • 进项税额转出在电子税务局怎么操作
  • 公司从个人手中购买设备
  • 建筑预缴税款什么意思
  • 计提本月工资会计怎么做账
  • 跨年度暂估成本的账务处理
  • 委托加工物资的加工费计入什么科目
  • 本月无收入还用结转吗
  • 企业构建固定资产无形资产和其他长期资产支付
  • 未实现融资收益借贷方向
  • 工程施工发生的酒水费会计分录
  • 借用别的公司资质的协议范本
  • sql修改表的所属空间
  • win7断电后无法启动
  • windows8安装程序
  • srv32.exe - srv32进程是什么文件 有何作用
  • win10桌面图标显示错误
  • win10 预览版 移除 tab 栏 特性
  • win7无线wifi
  • opengl纹理贴图步骤
  • python做排序
  • 批处理 修改文件名
  • 基于javascript的毕业设计
  • linux中gzip的用法
  • 简介生成
  • unity3d初学者教程视频
  • python 批量操作
  • 中国裁判文书怎么查个人案件
  • 财政部监制的发票
  • 小规模纳税人达到一般纳税人标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设