Before talking about face recognition encounter picture conversion problems, here is a summary.

Convert file to base64

CreateObjectURL ()

/ / structure
<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. The onload () = = > {/ / manual collection URL.revokeObjectURL(fileUrl) } }Copy the code

After an image is selected, the generated IMG SRC similar to “blob: NULL / 4304D4F3-C13B-43E8-83F6-8C80426520FF “is displayed normally.

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
    }
}
Copy the code

The SRC of the img tag will be something like data:image/ JPEG; Base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA = =, can display properly.

Canvas to DataURL

Images drawn on canvas are displayed elsewhere in THE HTML. The method here can also put the Canvas output as Dataurl into the IMG tag.

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

Canvas becomes bloB object

How to upload pictures generated by Canvas to Qiuniuyun or server? The answer is to print the Canvas as a Blob object so that you can manipulate it like a File object.

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