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

前面讲到人脸识别遇到图片转换的问题，这里总结一下。

将file转化成base64

方法一：利用URL.createObjectURL()

// 结构
<input type="file" name="" id="file">
<img src="" id="img">

// js
let imgElement = document.getElementById('img')
file.onchange = (e) => {
    let file = e.target.files[0]
    let fileUrl = window.URL.createObjectURL(file)
    imgElement.src = fileUrl
    imgElement.onload = () => {
        // 手动回收
        URL.revokeObjectURL(fileUrl)
    }
}

当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。

方法二: 利用FileReader.readAsDataURL()

let imgElement = document.getElementById('img')
file.onchange = (e) => {
    let file = e.target.files[0]
    const fr = new FileReader(file)
    fr.readAsDataURL(file)
    fr.onload = (result) => {
        $img.src = result
    }
}

img标签的src将会是像data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==，能够正常显示。

canvas 转为DataURL

canvas画出来的图片，在html中的其他地方显示。这里的方法也是可以将canvas输出为Dataurl的来放到img标签中。

let imgSrc = canvas.toDataURL('image/png')

canvas转为blob对象

canvas生成的图片，如何上传到七牛云或服务器？答案是将canvas输出为Blob对象，这样就可以像File对象一样操作它了。

canvas.toBlob((blobObj) => {
    console.log(blobObj)
})