前端图片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等格式转换相关推荐

Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换
前端图片canvas,file,blob,DataURL等格式转换最近用到一些图片相关的操作,记录一下笔记. 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预 ...
前端使用canvas实现昵称首个文字转换成图片功能
最近在用腾讯会议的时,看到要是没有设置自定义头像时会有个默认头像,就是昵称的第一个字母.上班摸鱼时突然想用原生的画布实现这个功能. canvas有能够转换成bas64的功能,说以直接写js代码就行,直 ...
python批量读取图片并复制入word_提取word文档中的图片并使用Python进行批量格式转换,出,Word,里,利用,python...
日常工作中,你是否遇到过这样的场景,领导发来一份 Word 文档,要求你将文档中的图片存储到一个文件夹内,并且还要将图片都改成 .jpg 或者 .png,你会怎么办?你是不是一边内心崩溃,一边开始一张 ...
前端学习（2981）：Json格式转换
怎样把图片转换成jpg格式？如何完成批量图片格式转换？
处理图片时,如果遇到图片格式转换(https://www.yasuotu.com/geshi)的时候该怎么办呢?尤其需要批量图片格式转化的时候,有没有比较方便又快捷的方法呢?推荐使用压缩图的图片处理工 ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
图片格式转换（File、Blob、base64）
前言记录一下比较常见的图片格式(File.Blob.base64)在不同的场景他们之间的相互转换的方法. 一.类型简介 Blob BLOB(binary large object): 二进制大对象, ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...
图片或文件Blob、File、Base64之间的相互转换
Blob.File.Base64之间的相互转换前言 base64 转 Blob 对象 base64 转 File 对象 File 对象,Blob 对象转base64 blob链接转 base64 ...