将file转化成blob

  • 利用URL.createObjectURL()
    let $img = document.getElementById('img')    file.onchange = function (e) {        let file = e.target.files[0]        let fileUrl = window.URL.createObjectURL(file)        $img.src = fileUrl        img.onload = function () {            // 手动回收            URL.revokeObjectURL(fileUrl)        }    }
当抉择图片后，生成的img src相似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能失常显示图片。

将file转化为DataURL

  • 利用FileReader.readAsDataURL()
    let $img = document.getElementById('img')    file.onchange = function (e) {        console.log(e.target.files)        let file = e.target.files[0]        const fr = new FileReader(file)        fr.readAsDataURL(file)        fr.onload = function () {            $img.src = this.result        }    }

canvas转为DataURL

canvas画进去的图片，在html中的其余中央显示。这里的办法也是能够将canvas输入为Dataurl的来放到img标签中。
let imgSrc = canvas.toDataURL('image/png')// canvas.toDataURL('image/jpeg')

canvas转为blob对象

将canvas输入为Blob对象，这样就能够像File对象一样操作它了
canvas.toBlob(function (blobObj) {    console.log(blobObj) //blobObj就是blob对象（类文件）})

Blob对象显示图片

同上,如果拿到blob对象，亦能够应用URL.createObjectURL()来进行转换
canvas.toBlob(function (blobObj) {    console.log(blobObj) //blobObj就是blob对象（类文件）    let imgSrc = window.URL.createObjectURL(blobObj)    document.getElementById('img').src = imgSrc})

最初附一个下载DataURL下载办法：

function downloadImg () {    let aLink = document.createElement('a')    aLink.download = 'fileName.png' // 文件名后缀须要和dataurl示意的雷同，否则可能乱码    aLink.href = dataUrl    aLink.click()}