日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641 
 
 
 
 

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
    文件下載  
  
  
  
  
      
  
  
  
  
    
  
  
  
  
 
 
 
 
 

index.js 

 
 
 
 

  
  
  
  
const download = (fileName, blob) => {  
  
  
  
  
  const link = document.createElement("a");  
  
  
  
  
  link.href = URL.createObjectURL(blob);  
  
  
  
  
  link.download = fileName;  
  
  
  
  
  link.click();  
  
  
  
  
  link.remove();  
  
  
  
  
  URL.revokeObjectURL(link.href);  
  
  
  
  
};  
  
  
  
  
const downloadBtn = document.querySelector("#downloadBtn");  
  
  
  
  
downloadBtn.addEventListener("click", (event) => {  
  
  
  
  
  const fileName = "blob.txt";  
  
  
  
  
  const myBlob = new Blob(["一文徹底掌握 Blob Web API"], { type: "text/plain" });  
  
  
  
  
  download(fileName, myBlob);  
  
  
  
  
}); 
 
 
 
 

在示例中，我們通過調(diào)用 Blob 的構(gòu)造函數(shù)來創(chuàng)建類型為 "text/plain" 的 Blob 對象，然后通過動態(tài)創(chuàng)建 a 標(biāo)簽來實現(xiàn)文件的下載。

3.4 Blob 轉(zhuǎn)換為 Base64

URL.createObjectURL 的一個替代方法是，將 Blob 轉(zhuǎn)換為 base64 編碼的字符串。Base64 是一種基于 64 個可打印字符來表示二進制數(shù)據(jù)的表示方法，它常用于在處理文本數(shù)據(jù)的場合，表示、傳輸、存儲一些二進制數(shù)據(jù)，包括 MIME 的電子郵件及 XML 的一些復(fù)雜數(shù)據(jù)。

在 MIME 格式的電子郵件中，base64 可以用來將二進制的字節(jié)序列數(shù)據(jù)編碼成 ASCII 字符序列構(gòu)成的文本。使用時，在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個、數(shù)字 10 個、加號 + 和斜杠 /，共 64 個字符，等號 = 用來作為后綴用途。

下面我們來介紹如何在 HTML 中嵌入 base64 編碼的圖片。在編寫 HTML 網(wǎng)頁時，對于一些簡單圖片，通常會選擇將圖片內(nèi)容直接內(nèi)嵌在網(wǎng)頁中，從而減少不必要的網(wǎng)絡(luò)請求，但是圖片數(shù)據(jù)是二進制數(shù)據(jù)，該怎么嵌入呢？絕大多數(shù)現(xiàn)代瀏覽器都支持一種名為 Data URLs 的特性，允許使用 base64 對圖片或其他文件的二進制數(shù)據(jù)進行編碼，將其作為文本字符串嵌入網(wǎng)頁中。

Data URLs 由四個部分組成：前綴（data:）、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64 標(biāo)記、數(shù)據(jù)本身： 

 
 
 
 

  
  
  
  
data:[][;base64], 
 
 
 
 

mediatype 是個 MIME 類型的字符串，例如 "image/jpeg" 表示 JPEG 圖像文件。如果被省略，則默認值為 text/plain;charset=US-ASCII。如果數(shù)據(jù)是文本類型，你可以直接將文本嵌入（根據(jù)文檔類型，使用合適的實體字符或轉(zhuǎn)義字符）。如果是二進制數(shù)據(jù)，你可以將數(shù)據(jù)進行 base64 編碼之后再進行嵌入。比如嵌入一張圖片： 

但需要注意的是：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因為該圖片經(jīng)過 base64 編碼后的字符串非常大，會明顯增大 HTML 頁面的大小，從而影響加載速度。 除此之外，利用 FileReader API，我們也可以方便的實現(xiàn)圖片本地預(yù)覽功能，具體代碼如下： 

在以上示例中，我們?yōu)?file 類型輸入框綁定 onchange 事件處理函數(shù) loadFile，在該函數(shù)中，我們創(chuàng)建了一個 FileReader 對象并為該對象綁定 onload 相應(yīng)的事件處理函數(shù)，然后調(diào)用 FileReader 對象的 readAsDataURL() 方法，把本地圖片對應(yīng)的 File 對象轉(zhuǎn)換為 Data URL。

在完成本地圖片預(yù)覽之后，我們可以直接把圖片對應(yīng)的 Data URLs 數(shù)據(jù)提交到服務(wù)器。針對這種情形，服務(wù)端需要做一些相關(guān)處理，才能正常保存上傳的圖片，這里以 Express 為例，具體處理代碼如下： 

 
 
 
 

  
  
  
  
const app = require('express')();  
  
  
  
  
app.post('/upload', function(req, res){  
  
  
  
  
    let imgData = req.body.imgData; // 獲取POST請求中的base64圖片數(shù)據(jù)  
  
  
  
  
    let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");  
  
  
  
  
    let dataBuffer = Buffer.from(base64Data, 'base64');  
  
  
  
  
    fs.writeFile("image.png", dataBuffer, function(err) {  
  
  
  
  
        if(err){  
  
  
  
  
          res.send(err);  
  
  
  
  
        }else{  
  
  
  
  
          res.send("圖片上傳成功！");  
  
  
  
  
        }  
  
  
  
  
    });  
  
  
  
  
}); 
 
 
 
 

對于 FileReader 對象來說，除了支持把 Blob/File 對象轉(zhuǎn)換為 Data URL 之外，它還提供了 readAsArrayBuffer() 和 readAsText() 方法，用于把 Blob/File 對象轉(zhuǎn)換為其它的數(shù)據(jù)格式。這里我們來看個 readAsArrayBuffer() 的使用示例： 

 
 
 
 

  
  
  
  
// 從 blob 獲取 arrayBuffer  
  
  
  
  
let fileReader = new FileReader(); 
  
  
  
  
fileReader.onload = function(event) {  
  
  
  
  
  let arrayBuffer = fileReader.result;  
  
  
  
  
};  
  
  
  
  
fileReader.readAsArrayBuffer(blob); 
 
 
 
 

3.5 圖片壓縮

在一些場合中，我們希望在上傳本地圖片時，先對圖片進行一定的壓縮，然后再提交到服務(wù)器，從而減少傳輸?shù)臄?shù)據(jù)量。在前端要實現(xiàn)圖片壓縮，我們可以利用 Canvas 對象提供的 toDataURL() 方法，該方法接收 type 和 encoderOptions 兩個可選參數(shù)。

其中 type 表示圖片格式，默認為 image/png。而 encoderOptions 用于表示圖片的質(zhì)量，在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認值 0.92，其他參數(shù)會被忽略。

下面我們來看一下具體如何實現(xiàn)圖片壓縮： 

 
 
 
 

  
  
  
  
// compress.js  
  
  
  
  
const MAX_WIDTH = 800; // 圖片最大寬度  
  
  
  
  
function compress(base64, quality, mimeType) {  
  
  
  
  
  let canvas = document.createElement("canvas");  
  
  
  
  
  let img = document.createElement("img");  
  
  
  
  
  img.crossOrigin = "anonymous";  
  
  
  
  
  return new Promise((resolve, reject) => {  
  
  
  
  
    img.src = base64;  
  
  
  
  
    img.onload = () => {  
  
  
  
  
      let targetWidth, targetHeight;  
  
  
  
  
      if (img.width > MAX_WIDTH) {  
  
  
  
  
        targetWidth = MAX_WIDTH;  
  
  
  
  
        targetHeight = (img.height * MAX_WIDTH) / img.width;  
  
  
  
  
      } else {  
  
  
  
  
        targetWidth = img.width;  
  
  
  
  
        targetHeight = img.height;  
  
  
  
  
      }  
  
  
  
  
      canvas.width = targetWidth;  
  
  
  
  
      canvas.height = targetHeight;  
  
  
  
  
      let ctx = canvas.getContext("2d");  
  
  
  
  
      ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除畫布  
  
  
  
  
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  
  
  
  
  
      let imageData = canvas.toDataURL(mimeType, quality / 100);  
  
  
  
  
      resolve(imageData);  
  
  
  
  
    };  
  
  
  
  
  });  
  
  
  
  
} 
 
 
 
 

對于返回的 Data URL 格式的圖片數(shù)據(jù)，為了進一步減少傳輸?shù)臄?shù)據(jù)量，我們可以把它轉(zhuǎn)換為 Blob 對象： 

 
 
 
 

  
  
  
  
function dataUrlToBlob(base64, mimeType) {  
  
  
  
  
  let bytes = window.atob(base64.split(",")[1]);  
  
  
  
  
  let ab = new ArrayBuffer(bytes.length);  
  
  
  
  
  let ia = new Uint8Array(ab);  
  
  
  
  
  for (let i = 0; i < bytes.length; i++) {  
  
  
  
  
    ia[i] = bytes.charCodeAt(i);  
  
  
  
  
  }  
  
  
  
  
  return new Blob([ab], { type: mimeType });  
  
  
  
  
} 
 
 
 
 

在轉(zhuǎn)換完成后，我們就可以壓縮后的圖片對應(yīng)的 Blob 對象封裝在 FormData 對象中，然后再通過 AJAX 提交到服務(wù)器上： 

 
 
 
 

  
  
  
  
function uploadFile(url, blob) {  
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  let request = new XMLHttpRequest();  
  
  
  
  
  formData.append("image", blob);  
  
  
  
  
  request.open("POST", url, true);  
  
  
  
  
  request.send(formData);  
  
  
  
  
} 
 
 
 
 

其實 Canvas 對象除了提供 toDataURL() 方法之外，它還提供了一個 toBlob() 方法，該方法的語法如下：   

 
 
 
 

  
  
  
  
canvas.toBlob(callback, mimeType, qualityArgument) 
 
 
 
 

和 toDataURL() 方法相比，toBlob() 方法是異步的，因此多了個 callback 參數(shù)，這個 callback 回調(diào)方法默認的第一個參數(shù)就是轉(zhuǎn)換好的 blob文件信息。

介紹完上述的內(nèi)容，我們來看一下本地圖片壓縮完整的示例： 

3.6 生成 PDF 文檔

PDF（便攜式文件格式，Portable Document Format）是由 Adobe Systems 在 1993 年用于文件交換所發(fā)展出的文件格式。在瀏覽器端，利用一些現(xiàn)成的開源庫，比如 jsPDF，我們也可以方便地生成 PDF 文檔。 

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
    
客戶端生成 PDF 示例
  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
 
 
 
 
 

在以上示例中，我們首先創(chuàng)建 PDF 文檔對象，然后調(diào)用該對象上的 text() 方法在指定的坐標(biāo)點上添加 Hello semlinker! 文本，然后我們利用生成的 PDF 內(nèi)容來創(chuàng)建對應(yīng)的 Blob 對象，需要注意的是我們設(shè)置 Blob 的類型為 application/pdf，最后我們把 Blob 對象中保存的內(nèi)容轉(zhuǎn)換為文本并輸出到控制臺。由于內(nèi)容較多，這里我們只列出少部分輸出結(jié)果： 

 
 
 
 

  
  
  
  
%PDF-1.3  
  
  
  
  
%o??à  
  
  
  
  
3 0 obj  
  
  
  
  
<
  
  
  
  
/Parent 1 0 R  
  
  
  
  
/Resources 2 0 R  
  
  
  
  
/MediaBox [0 0 595.28 841.89]  
  
  
  
  
/Contents 4 0 R  
  
  
  
  
>>  
  
  
  
  
endobj  
  
  
  
  
.... 
 
 
 
 

其實 jsPDF 除了支持純文本之外，它也可以生成帶圖片的 PDF 文檔，比如： 

 
 
 
 

  
  
  
  
let imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...'  
  
  
  
  
let doc = new jsPDF();  
  
  
  
  
doc.setFontSize(40)  
  
  
  
  
doc.text(35, 25, 'Paranyan loves jsPDF')  
  
  
  
  
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160) 
 
 
 
 

Blob 的應(yīng)用場景還很多，這里我們就不一一列舉了，感興趣的小伙伴可以自行查閱相關(guān)資料。

四、Blob 與 ArrayBuffer 的區(qū)別

ArrayBuffer 對象用于表示通用的，固定長度的原始二進制數(shù)據(jù)緩沖區(qū)。你不能直接操縱 ArrayBuffer 的內(nèi)容，而是需要創(chuàng)建一個類型化數(shù)組對象或 DataView 對象，該對象以特定格式表示緩沖區(qū)，并使用該對象讀取和寫入緩沖區(qū)的內(nèi)容。

Blob 類型的對象表示不可變的類似文件對象的原始數(shù)據(jù)。Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。File 接口基于 Blob，繼承了Blob 功能并將其擴展為支持用戶系統(tǒng)上的文件。

4.1 Blob vs ArrayBuffer

•  除非你需要使用 ArrayBuffer 提供的寫入/編輯的能力，否則 Blob 格式可能是最好的。
•  Blob 對象是不可變的，而 ArrayBuffer 是可以通過 TypedArrays 或 DataView 來操作。
•  ArrayBuffer 是存在內(nèi)存中的，可以直接操作。而 Blob 可以位于磁盤、高速緩存內(nèi)存和其他不可用的位置。
•  雖然 Blob 可以直接作為參數(shù)傳遞給其他函數(shù)，比如 window.URL.createObjectURL()。但是，你可能仍需要 FileReader 之類的 File API 才能與 Blob 一起使用。
•  Blob 與 ArrayBuffer 對象之間是可以相互轉(zhuǎn)化的：
  •   使用 FileReader 的 readAsArrayBuffer() 方法，可以把 Blob 對象轉(zhuǎn)換為 ArrayBuffer 對象；
  •   使用 Blob 構(gòu)造函數(shù)，如 new Blob([new Uint8Array(data]);，可以把 ArrayBuffer 對象轉(zhuǎn)換為 Blob 對象。

對于 HTTP 的場景，比如在 AJAX 場景下，Blob 和 ArrayBuffer 可以通過以下方式來使用： 

 
 
 
 

  
  
  
  
function GET(url, callback) {  
  
  
  
  
  let xhr = new XMLHttpRequest();  
  
  
  
  
  xhr.open('GET', url, true);  
  
  
  
  
  xhr.responseType = 'arraybuffer'; // or xhr.responseType = "blob";  
  
  
  
  
  xhr.send();  
  
  
  
  
  xhr.onload = function(e) {  
  
  
  
  
    if (xhr.status != 200) {  
  
  
  
  
      alert("Unexpected status code " + xhr.status + " for " + url);  
  
  
  
  
      return false;  
  
  
  
  
    }  
  
  
  
  
    callback(new Uint8Array(xhr.response)); // or new Blob([xhr.response]);  
  
  
  
  
  };  
  
  
  
  
} 
 
 
 
 

對于 ArrayBuffer 和 Uint8Array 感興趣的讀者，可以閱讀Deno bytes 模塊全解析這篇文章。

了解完上述的內(nèi)容，相信有的讀者可能會覺得意猶未盡。那么，對于 Blob 來說還有哪些內(nèi)容可以繼續(xù)深入學(xué)習(xí)的呢？本人下一步的計劃是基于 Deno 的源碼，來逐步分析 DenoBlob 的具體實現(xiàn)。當(dāng)然也會順便分析一下 URL.createObjectURL() 方法和 revokeObjectURL() 方法的實現(xiàn)。

五、參考資源

•  MDN - Blob
•  MDN - Data URLs
•  javascript.info - blob
•  flaviocopes - blob
•  arraybuffer-vs-blob
•  javascript-interview-question-what-is-a-blob