引言

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

一、概念介紹

Blob： 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。
Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。

dataURL： 即前綴為 data: 協(xié)議的URL，其允許內(nèi)容創(chuàng)建者向文檔中嵌入小文件。
Data URLs 由四個部分組成：前綴(data:)、指示數(shù)據(jù)類型的MIME類型、如果非文本則為可選的base64標(biāo)記、數(shù)據(jù)本身：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 元素來繪制圖形的方式。它可以用于動畫、游戲畫面、數(shù)據(jù)可視化、圖片編輯以及實時視頻處理等方面。

二、相互轉(zhuǎn)化

2-1. dataURL(base64) 轉(zhuǎn)化成 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 文件數(shù)據(jù)繪制到 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 轉(zhuǎn)化成 dataURL

FileReader： 對象允許 Web 應(yīng)用程序異步讀取文件(或原始數(shù)據(jù)緩沖區(qū))內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

function fileToDataURL(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    // reader 讀取文件成功的回調(diào)
    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實現(xiàn)與File DataURL canvas相互轉(zhuǎn)換示例的詳細(xì)內(nèi)容，更多關(guān)于Blob與File DataURL canvas相互轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論