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

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

将file转化成base64

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

方法一：利用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 = fileUrl
			img.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==，可以正常显示。html5

canvas 转为DataURL

场景： canvas画出来的图片，在html中的其余地方显示。这里的方法也是能够将canvas输出为Dataurl的来放到img标签中。java

let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
复制代码

canvas转为blob对象

场景： canvas生成的图片，如何上传到七牛云或服务器？答案是将canvas输出为Blob对象，这样就能够像File对象同样操做它了。canvas

canvas.toBlob(function (blobObj) {
	console.log(blobObj)
})
复制代码

Blob对象显示图片

场景：获取到的图片是Blob格式的，如何显示在html中？答案仍是将Blob对象转换为DataUrl的形式。api

canvas.toBlob(function (blobObj) {
	let imgSrc = window.URL.createObjectURL(blobObj)
	document.getElementById('img').src = imgSrc
})
复制代码

下载DataURL表示的图片

场景： html中一张用DataURL形式显示出来的图片，能够下载到本地吗？答案是使用一个a标签，并设置download属性，模拟点击。bash