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

浪尽此生 提交于 2020-12-11 08:58:19

将file转化成base64

  • 方法一:利用URL.createObjectURL()
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>base</title>
 5 </head>
 6 <body>
 7 <input type="file" name="" id="file">
 8 <img src="" id="img">
 9 <script type="text/javascript">
10     window.onload = function () {
11         let $img = document.getElementById('img')
12         file.onchange = function (e) {
13             console.log(e.target.files[0])
14             let file = e.target.files[0]
15             let fileUrl = window.URL.createObjectURL(file)
16             $img.src = fileUrl
17             img.onload = function () {
18                 // 手动回收
19                 URL.revokeObjectURL(fileUrl)
20             }
21         }
22     }
23 </script>
24 </body>
25 </html>

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

  • 方法二: 利用FileReader.readAsDataURL()
<!DOCTYPE html>
<html>
<head>
    <title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
    window.onload = function () {
        let $img = document.getElementById('img')
        file.onchange = function (e) {
            console.log(e.target.files[0])
            let file = e.target.files[0]
            const fr = new FileReader(file)
            fr.readAsDataURL(file)
            fr.onload = function () {
                 $img.src = this.result
            }
        }
    }
</script>
</body>
</html>

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

 

canvas 转为DataURL

 

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

 

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

canvas转为blob对象

 

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

 

canvas.toBlob(function (blobObj) {
    console.log(blobObj)
})
canvas.toBlob还有两个参数一个是名称name,另一个是压缩质量quality 0~1

Blob对象显示图片

 

场景: 获取到的图片是Blob格式的,如何显示在html中?答案还是将Blob对象转换为DataUrl的形式。

 

canvas.toBlob(function (blobObj) {
    let imgSrc = window.URL.createObjectURL(blobObj)
    document.getElementById('img').src = imgSrc
})

下载DataURL表示的图片

 

场景: html中一张用DataURL形式显示出来的图片,可以下载到本地吗?答案是使用一个a标签,并设置download属性,模拟点击。

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

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!