关于前端:前端图片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()
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理