日韩无码专区无码一级三级片|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);  
  
  
  
  
}); 
 
 
 
 

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

3.4 Blob 轉換為 Base64

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

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

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

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

 
 
 
 

  
  
  
  
data:[][;base64], 
 
 
 
 

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

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

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

在完成本地圖片預覽之后，我們可以直接把圖片對應的 Data URLs 數(shù)據(jù)提交到服務器。針對這種情形，服務端需要做一些相關處理，才能正常保存上傳的圖片，這里以 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 對象轉換為 Data URL 之外，它還提供了 readAsArrayBuffer() 和 readAsText() 方法，用于把 Blob/File 對象轉換為其它的數(shù)據(jù)格式。這里我們來看個 readAsArrayBuffer() 的使用示例： 

 
 
 
 

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

3.5 圖片壓縮

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

其中 type 表示圖片格式，默認為 image/png。而 encoderOptions 用于表示圖片的質量，在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 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ù)量，我們可以把它轉換為 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 });  
  
  
  
  
} 
 
 
 
 

在轉換完成后，我們就可以壓縮后的圖片對應的 Blob 對象封裝在 FormData 對象中，然后再通過 AJAX 提交到服務器上： 

 
 
 
 

  
  
  
  
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 回調方法默認的第一個參數(shù)就是轉換好的 blob文件信息。

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

3.6 生成 PDF 文檔

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

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
    
客戶端生成 PDF 示例
  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
 
 
 
 
 

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

 
 
 
 

  
  
  
  
%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 的應用場景還很多，這里我們就不一一列舉了，感興趣的小伙伴可以自行查閱相關資料。

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

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

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

4.1 Blob vs ArrayBuffer

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

了解完上述的內容，相信有的讀者可能會覺得意猶未盡。那么，對于 Blob 來說還有哪些內容可以繼續(xù)深入學習的呢？本人下一步的計劃是基于 Deno 的源碼，來逐步分析 DenoBlob 的具體實現(xiàn)。當然也會順便分析一下 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