关于前端:前端图片canvasFileBlobData-Url等格式转换

将 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()}