JavaScript Blob圖片簡介 在現代的后端和前端開發中，顯示圖片已經成為了web應用程序不可或缺的一部分。而我們常常需要處理和處理圖片的流。傳統上有一個處理流式數據接口的起源 python 的IO 模塊。JavaScript 對流的處理也追隨了相似的思路，采用 Blob 對象作為表示流的媒介。 那么什么是 Blob？又怎么把 Blob 和圖片聯系到一起來完成操作呢？ 一、什么是Blob？ Blob 對象表示不可變、原始數據的類似于文件的對象。 Blob 表示二進制數據結構，用于構建原始數據流，它比 HTTP 斷點續傳更高效，可以在 Web 頁面和不同應用之間快速地傳遞數據。 我們可以使用 Blob 對象的以下方法來獲取其中的數據: Blob.iso — 返回一個類型為 DOMString 的字符串，代表該 Blob 對象的MIME類型 Blob.size — 返回一個 unsigned longlong 類型的值，表示該 Blob 對象中數據的大小。 Blob.slice() — 返回一個新的 Blob 對象， 代表前一 Blob 的子集。 二、如何在 JavaScript 中處理Blob 圖片？ 我們可以使用 JavaScript 的 Blob 來生成, 加載和下載圖像。下面是使用 Blob 對象和 HTML canvas 標記在本地存儲圖像：

創建并操作Blob對象可以使用下面的代碼

// 創建 blob 對象
var myBlob = new Blob(["這是一堆測試內容"], {
type: "text/plain;charset=utf-8"
 });
//打開用 window.URL.createObjectURL 提供的 URL 以便下載文件
var a = document.createElement('a');
a.href = window.URL.createObjectURL(myBlob);
a.download = 'myfilename.txt';
a.style.display = 'none'; // 隱藏 Dom 元素
document.body.appendChild(a);
a.click(); // 模擬click事件
document.body.removeChild(a);

使用 canvas 和 Blob 將 Image 對象轉換成 Blob 對象并生成blob對象的URL

//  Create a new canvas, and set such you want
var canvas = document.createElement('canvas');
// Add canvas to the DOM
document.body.appendChild(canvas);
// Set the canvas size
canvas.width = 300;
canvas.height = 300;
// Get canvas context
var ctx = canvas.getContext('2d');
// Draw a image on canvas 
ctx.drawImage(img,0,0,300,300);
// Get the data of canvas in blob
canvas.toBlob(function(blob) {
var formData = new FormData();
formData.append('image', blob, "myimage.jpg");
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api/upload')
});

當然，這只是其中一種 Blob 處理圖片的方法，具體使用需要根據自己的需求來，例如使用自定義 HTTPS 可能需要一些加密庫，同時 Blob 也不能直接上傳服務器，需要用 fileReader 轉換成文件流。