欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

前端图片canvas，file，blob，DataURL等格式转换

发布时间：2023/12/2 HTML 54 豆豆
生活随笔 收集整理的这篇文章主要介绍了 前端图片canvas，file，blob，DataURL等格式转换 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

最近用到一些图片相关的操作，记录一下笔记。

将file转化成base64

场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：

  • 方法一：利用URL.createObjectURL()
<!DOCTYPE html> <html> <head><title>base</title> </head> <body> <input type="file" name="" id="file"> <img src="" id="img"> <script type="text/javascript">window.onload = function () {let $img = document.getElementById('img')file.onchange = function (e) {console.log(e.target.files[0])let file = e.target.files[0]let fileUrl = window.URL.createObjectURL(file)$img.src = fileUrlimg.onload = function () {// 手动回收URL.revokeObjectURL(fileUrl)}}} </script> </body> </html>

当选择图片后，生成的img src类似

"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。

  • 方法二: 利用FileReader.readAsDataURL()
<!DOCTYPE html> <html> <head><title>base</title> </head> <body> <input type="file" name="" id="file"> <img src="" id="img"> <script type="text/javascript">window.onload = function () {let $img = document.getElementById('img')file.onchange = function (e) {console.log(e.target.files[0])let file = e.target.files[0]const fr = new FileReader(file)fr.readAsDataURL(file)fr.onload = function () {$img.src = this.result}}} </script> </body> </html>

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 = dataUrlaLink.click() }

参考文章

  • 文件和二进制数据的操作
  • 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
  • 前端图片转base64，转格式，转blob，上传的总结

总结

以上是生活随笔为你收集整理的前端图片canvas，file，blob，DataURL等格式转换的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。