场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：
方法一：利用URL.createObjectURL()
<!DOCTYPE html>
<title>base</title>
</head>
<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>
<title>base</title>
</head>
<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 = dataUrl
aLink.click()
文件和二进制数据的操作
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
前端图片转base64，转格式，转blob，上传的总结
