一、 概念介紹

1. File

(1) 通常情況下， File 物件是來自使用者在一個 input 元素上選擇檔案後返回的 FileList 物件,也可以是來自由拖放操作生成的 DataTransfer 物件，或者來自htmlCanvasElement 上的 mozGetAsFile() API。

(2) File 物件是特殊型別的 Blob，且可以用在任意的 Blob 型別的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。

2. Blob

(1) Blob 物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。

(2) Blob 表示的不一定是JavaScript原生格式的資料。File 介面基於Blob，繼承了 blob 的功能並將其擴充套件使其支援使用者系統上的檔案。

3. dataURL

(1) Data URLs，即字首為 data: 協議的URL，其允許內容建立者向文件中嵌入小檔案。

(2) Data URLs 由四個部分組成：字首(data:)、指示資料型別的MIME型別、如果非文字則為可選的base64標記、資料本身：data:[][;base64],

4. canvas

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

二、相互轉化

1. 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
    }
}
 

https://www.houdianzi.com/nblogo/ 寧波logo設計

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

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

4. 從 canvas 中獲取檔案 dataURL

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