Blob實現與File DataURL canvas相互轉換範例

2022-06-28 14:02:52

引言

因為瀏覽器沙箱的存在，web端操作檔案的限制比較多，只能進行一些簡單的檔案上傳下載。對於編輯檔案和檔案轉換感到蒼白無力，但這並不代表說毫無辦法。隨著現代化瀏覽器的不斷升級，也提供了一些好用強大的API可以間接操作檔案，例如文字中的Blob、canvas等等。

一、概念介紹

Blob：物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。
Blob 表示的不一定是JavaScript原生格式的資料。File 介面基於Blob，繼承了 blob 的功能並將其擴充套件使其支援使用者系統上的檔案。

dataURL：即字首為 data: 協定的URL，其允許內容建立者向檔案中嵌入小檔案。
Data URLs 由四個部分組成：字首(data:)、指示資料型別的MIME型別、如果非文字則為可選的base64標記、資料本身：data(base64),

File：通常情況下， File 物件是來自使用者在一個 input 元素上選擇檔案後返回的 FileList 物件,也可以是來自由拖放操作生成的 DataTransfer 物件，或者來自htmlCanvasElement 上的 mozGetAsFile() API。
File 物件是特殊型別的 Blob，且可以用在任意的 Blob 型別的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。

canvas： Canvas API 提供了一個通過JavaScript和html的 canvas 元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、資料視覺化、圖片編輯以及實時視訊處理等方面。

二、相互轉化

2-1. dataURL(base64) 轉化成 Blob(二進位制)物件

function dataURLToBlob(fileDataURL) {
    let arr = fileDataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n --) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], {type: mime})
}

2-2. File、Blob 檔案資料繪製到 canvas

// 思路：File, Blob ——> dataURL ——> canvas

function fileAndBlobToCanvas(fileDataURL) {
    let img = new Image()
    img.src = fileDataURL
    let canvas = document.createElement('canvas')
    if(!canvas.getContext) {
      alert('瀏覽器不支援canvas')
      return;
    }
    let ctx = canvas.getContext('2d')
    document.getElementById('container').appendChild(canvas)
    img.onload = function() {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
}

2-3. File、Blob 轉化成 dataURL

FileReader：物件允許 Web 應用程式非同步讀取檔案(或原始資料緩衝區)內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。

function fileToDataURL(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    // reader 讀取檔案成功的回撥
    reader.onload = function(e) {
      return reader.result
    }
}

2-4. 從 canvas 中獲取檔案 dataURL

function canvasToDataURL() {
    let canvas = document.createElement('canvas')
    let canvasDataURL = canvas.toDataURL('image/png', 1.0)
    return canvasDataURL
}

以上就是Blob實現與File DataURL canvas相互轉換範例的詳細內容，更多關於Blob與File DataURL canvas相互轉換的資料請關注it145.com其它相關文章！