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

創(chuàng)建并操作Blob對(duì)象可以使用下面的代碼

// 創(chuàng)建 blob 對(duì)象
var myBlob = new Blob(["這是一堆測試內(nèi)容"], {
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 對(duì)象轉(zhuǎn)換成 Blob 對(duì)象并生成blob對(duì)象的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')
});

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