阿牛博客

DataURL, Blob, File, Image之间的关系与转换

domo的html

domo的触发js

01.File对象转换为dataURL、Blob对象转换为dataURL

和File对象转换为dataURL方法(fileToDataURL)是一样的,因为File接口基于Blob,继承了Blob的功能并进行了扩展,我们处理File对象和处理blog是类似的,可参考:[HTML5] Blob对象请戳这~
下面是测试:

02.dataURL转换为Blob对象、dataURL转换为File对象

03.将File,Blob的图片文件数据绘制到canvas

由上面可以得出一个小扩展功能:上传图片并压缩图片
步骤:1.上传图片;2.图通过片FileReader转dataURL;3.把dataURL赋值给一个新建图片,丢进canvas;4.由canvas来对图片压缩:a设置图片的宽高(canvas.getContext(‘2d’).drawImage(img, 0, 0, img.width, img.height));b设置图标的质量(canvas.toDataURL(“image/jpeg”, 1)),第二个参数是质量,
File继承于Blob,扩展了一些属性(文件名、修改时间、路径等),基本各种转化都基于dataURL,dataURL又可以通过h5的FileReader来得到。

04.canvas转换为dataURL (从canvas获取dataURL)

05.image转canvas

06.image转Blob(img转canvas,canvas转dataURL,dataURL转blob)

07.dataURL转image,这个不需要转,直接给了src就能用

扩展:上面好多图片onload都用了回调(异步),童鞋们还记得回调在es6的优化处理吗?有兴趣的或者还不懂的童鞋可以看看这个教程=>js常用的异步操作及async函数:请戳这~
哈哈,这里也照顾一下大忙人或者小懒人,直接贴个栗子:

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/567

上一篇: 移动端上传用户头像-图片裁剪及七牛云上传 » 下一篇: 前端解决接口跨域——反向代理配置(nginx和webpack) »