當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/2 HTML 48 豆豆

生活随笔收集整理的這篇文章主要介紹了前端图片canvas，file，blob，DataURL等格式转换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近用到一些圖片相關的操作，記錄一下筆記。

將file轉化成base64

場景：獲取到一個file類型的圖片，如果直接在html中預覽？這里就是利用html5的新特性，將圖片轉換為Base64的形式顯示出來。有兩種方法：

方法一：利用URL.createObjectURL()

<!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]let fileUrl = window.URL.createObjectURL(file)$img.src = fileUrlimg.onload = function () {// 手動回收URL.revokeObjectURL(fileUrl)}}} </script> </body> </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) })

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 = dataUrlaLink.click() }

參考文章

文件和二進制數據的操作
理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型
前端圖片轉base64，轉格式，轉blob，上傳的總結

總結

以上是生活随笔為你收集整理的前端图片canvas，file，blob，DataURL等格式转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：美团扫码付的前端可用性保障实践
下一篇： [译] SpaceAce 了解一下，一个