前端图片canvas,file,blob,DataURL等格式转换最近用到一些图片相关的操作,记录一下笔记。
将file转化成base64
场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。有两种方法:方法一:利用URL.createObjectURL()html>
base![AAffA0nNPuCLAAAAAElFTkSuQmCC](https://i-blog.csdnimg.cn/blog_migrate/0c22cf5894e2514a89bc5849b23ced76.png)
当选择图片后,生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff",能正常显示图片。方法二: 利用FileReader.readAsDataURL()html>
base![AAffA0nNPuCLAAAAAElFTkSuQmCC](https://i-blog.csdnimg.cn/blog_migrate/0c22cf5894e2514a89bc5849b23ced76.png)
img标签的src将会是像这样:"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==,能够正常显示。
canvas 转为DataURL
场景: canvas画出来的图片,在html中的其他地方显示。这里的方法也是可以将canvas输出为Dataurl的来放到img标签中。let imgSrc = canvas.toDataURL('image/png') // canvas.toDataURL('image/jpeg') 复制代码
canvas转为blob对象
场景: canvas生成的图片,如何上传到七牛云或服务器?答案是将canvas输出为Blob对象,这样就可以像File对象一样操作它了。canvas.toBlob(function (blobObj) { console.log(blobObj) }) 复制代码
Blob对象显示图片
场景: 获取到的图片是Blob格式的,如何显示在html中?答案还是将Blob对象转换为DataUrl的形式。canvas.toBlob(function (blobObj) { let imgSrc = window.URL.createObjectURL(blobObj) document.getElementById('img').src = imgSrc }) 复制代码
下载DataURL表示的图片
场景: html中一张用DataURL形式显示出来的图片,可以下载到本地吗?答案是使用一个a标签,并设置download属性,模拟点击。function downloadImg () { let aLink = document.createElement('a') aLink.download = 'fileName.png' // 文件名后缀需要和dataurl表示的相同,否则可能乱码 aLink.href = dataUrl aLink.click() }