位置: 编程技术 - 正文

利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解(canvas的使用步骤)

编辑:rootadmin

推荐整理分享利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解(canvas的使用步骤),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:canvas使用教程,canvas如何使用,canvas的使用步骤,canvas如何使用,canvas使用教程,canvas的todataurl,canvas如何使用,canvas如何使用,内容如对您有帮助,希望把文章链接给更多的朋友!

将图片转为base的好处

将图片转换为Base编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。

将图片转换成base编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片错误。

引言

假设一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base dataURL。在这个场景中,我们首先推断该图片路径是可访问的,同时还需要一种将图片转换到 dataURL 的方法。

我们如何实现它呢?

dataURL

先大致回顾下正统的 dataURL 的语法,这有助于我们检验转换后的内容是否正确。一个完整的 dataURI 应该是这样的:

其中mediatype声明了文件类型,遵循MIME规则,如“image/png”、“text/plain”;之后是编码类型,这里我们只涉及 base;紧接着就是文件编码后的内容了。我们常常在 HTML 里看到img标签的src会这样写:

利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解(canvas的使用步骤)

这个img引用的就是以 base 编码的 dataURL 了,只要浏览器支持,就可以被解码成 gif 图片并渲染出来。

.toDataURL()

FileReader对象也有类似的方法,比如.readAsDataURL() ,然而它只接受file或blob类型,而这两种类型一般只能通过<input[type=file]>元素的files属性获取,或者用Blob()构造函数手工创建一个新的对象。尴尬的是我们当前只有图片路径,受制于浏览器的安全策略, <input[type=file]>的files属性是只读的,而Blob()构造函数只接受文件内容,两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容。<img>是可以的,并且可以被绘制到<canvas>中,而<canvas>正巧拥有.toDataURL()方法。

万事具备,我们只需要把<img>获取到的图片放到<canvas>里再通过.toDataURL()方法转化下,就可以得到以 base 编码的 dataURL。来看这个方法的语法:

canvas是DOM元素<canvas>对象;参数type指定图片类型,如果指定的类型不被支持则以默认值image/png替代;encoderOptions可以为image/jpeg或image/webp类型的图片设置图片质量,取值0-1,超出则以默认值0.替代。

需要注意的是:在转换成 dataURL 前必须先确保图片成功加载到,于是.toDataURL()方法应该写在<img>的onload异步事件中。现在就来实现一个功能函数:

一个可供随时调用的转换函数完成了,它会在图片被加载后返回一整个 dataURL 字符串。

完善

onload事件确保了转换任务在加载后执行,却又带来了新问题——dataURL 只有在图片加载完成后才会返回,我们无法确定图片什么时候完成加载。如果后续要对 dataURL 做相关处理(比如传递到其他服务器)的话,添加一个回调是必要的,这能确保后续处理任务在成功得到 dataURL 之后执行,我们需要修改getBase() :

在执行时添加回调:

就是这样,如果不考虑兼容性的话,或许我们可以用 promise 和 generator 来实现,再添加一些错误处理就更完美了。

总结

标签: canvas的使用步骤

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

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

下一篇:解读ES6中class关键字(es6中的class常见使用场景)

  • ibps对公提回贷记分录
  • 个人保险发票能抵扣个税
  • 没申报可以开票嘛
  • 发票后面附清单明细能导出吗
  • 社保基数与工资不符
  • 产品报废怎么做账
  • 应征消费税的汽车为啥不能抵扣
  • 合同中止发票已入账怎么处理?
  • 农产品收购发票图片
  • 国税局可以开增值税专用发票吗
  • 申报开票是什么意思
  • 安全生产费纳税调整政策
  • 金税三期房产税源信息更改后
  • 职工报销差旅费会计科目
  • 发票冲红还需要作废吗
  • 小微企业差旅费可以税前扣除吗
  • 所得税年报报完了怎么更正季报
  • 退了货的发票还能用吗
  • 应交税费重分类分录
  • 其他资本公积增加会计处理方法
  • 物流企业之间的竞争
  • 什么是工商企业为了筹集资金而发行的债券
  • 增值税税负率多少为正常
  • 苹果6s自动清理
  • deepin隐藏分区
  • 如何在WIN10系统安装IE浏览器
  • 外汇延期收款办理操作指南
  • 资产划转的账务处理
  • intempt
  • 发票章盖的不清楚可以在旁边再盖一个吗
  • 深度学习&故障诊断初学者 - 学习路线
  • 无效借款合同自被确认为无效之日起无效
  • 稽查查补税款会计分录
  • php实现简单的登录验证
  • 境外服务费代扣代缴所得税
  • thinkphp框架下404页面设置 仅三步
  • Video Transformer | TimeSformer 理解+ 代码实战
  • framework core
  • 节流和防抖js
  • 前端cgi
  • 公司之间借款利息需要开票吗
  • 只有进项税没有销项税如何报税
  • 退货的会计处理分录
  • 为什么营业成本比营业收入大的时候没有计提减值准备呢
  • 数据库平移
  • 织梦网站特有标识
  • 企业所得税营业收入怎么填
  • 银行汇票如何背书转让
  • 罚款属于应付账款吗
  • 出口退税是什么
  • 应交税费应交增值税借贷方向
  • 固定资产的处置方式包括
  • 收到税务局退回的个税手续费怎么入账
  • 不用人工
  • 环境保护税法自什么时候起施行
  • 资产负债表里包括哪两个数据
  • 政府补助的分类及会计处理方法
  • 公司场地租赁交什么税
  • 发票已到款未付怎么做账
  • mysql缩印
  • centos7怎么配置yum源
  • 局域网 下载
  • win7系统玩游戏好吗
  • centos6.8升级centos7
  • xp系统提升性能
  • win8.1出现了一些问题
  • 动态设置class
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • ml命令
  • bat批处理文件的语句
  • 针对后台列表table拖拽比较实用的jquery拖动排序
  • unity random.value
  • 江西低保查询系统
  • 党员参观红色教育基地活动的意义
  • 党费的缴纳是否扣除所得税
  • 袁野近照
  • 北京市地税局电话是多少
  • 北京市房产查询官网
  • 用于直接销售消费品的消费税计入
  • 河北地税局电话号码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设