Blob實現與File DataURL canvas相互轉換示例詳解

導讀	這篇文章主要為大家介紹了Blob實現與File DataURL canvas相互轉換的示例詳解，有需要的朋友可以借鑑參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

因為瀏覽器沙箱的存在，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 元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、資料視覺化、圖片編輯以及實時影片處理等方面。

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

// 思路：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)
    }
}

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

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

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

以上就是Blob實現與File DataURL canvas相互轉換示例的詳細內容。

原文來自：