你知道什麼是BLOB URL嗎？為什麼要使用它？

王铁柱6發表於2024-11-27

BLOB URL（Binary Large OBject URL），也稱為物件URL，是一種偽URL，用於在瀏覽器中顯示客戶端生成的二進位制資料。它允許JavaScript動態建立指向記憶體中資料的URL，而無需將資料儲存到伺服器。

前端開發中使用BLOB URL的主要原因如下：

  • 顯示動態生成的影像/檔案: 可以將canvas繪製的影像、客戶端錄製的音訊/影片、動態生成的文字檔案等轉換為BLOB URL，然後將其設定為<img>、<video>、<a>等元素的src屬性，從而在瀏覽器中顯示或下載。

  • 處理使用者上傳的檔案: 在使用者上傳檔案後，可以使用FileReader API將檔案讀取為BLOB，然後使用BLOB URL在客戶端進行預覽、編輯或上傳，而無需立即將檔案上傳到伺服器。

  • 提高效能: 對於一些小的檔案或資料，使用BLOB URL可以避免不必要的伺服器請求，從而提高頁面載入速度和使用者體驗。

  • 保護使用者隱私: 在某些情況下，例如處理使用者上傳的敏感資料時，使用BLOB URL可以在客戶端進行處理，而無需將資料傳送到伺服器，從而更好地保護使用者隱私。

  • 建立下載連結: 可以使用BLOB URL建立下載連結，允許使用者下載客戶端生成的動態內容。

示例 (JavaScript):

// 建立一個包含文字的 Blob
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

// 建立 Blob URL
const blobUrl = URL.createObjectURL(blob);

// 建立一個下載連結
const link = document.createElement('a');
link.href = blobUrl;
link.download = 'hello.txt';
link.textContent = 'Download hello.txt';

// 將連結新增到頁面
document.body.appendChild(link);


//  Canvas 示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ... 繪製 canvas ...

const imageBlob = canvas.toBlob(function(blob) {
  const imageUrl = URL.createObjectURL(blob);
  const img = document.createElement('img');
  img.src = imageUrl;
  document.body.appendChild(img);
});


// 釋放 Blob URL (重要！)
// 當不再需要 Blob URL 時，應該釋放它以避免記憶體洩漏
URL.revokeObjectURL(blobUrl); // 在下載完成後或不再需要時呼叫

//  在Canvas示例中，由於imageUrl在回撥函式內部，需要在適當的時機釋放，例如圖片載入完成後:
img.onload = function() {
  URL.revokeObjectURL(imageUrl);
}

總結:

BLOB URL 是一種強大的工具，可以方便地在前端處理二進位制資料，提高效能並保護使用者隱私。 但是，需要注意的是，BLOB URL 僅在當前瀏覽器視窗有效，並且需要手動釋放以避免記憶體洩漏。 因此，在使用完畢後，務必使用 URL.revokeObjectURL() 釋放 BLOB URL。

相關文章