JavaScript 解析 WebSocket 回傳的二進位圖片資料並顯示在頁面

WebSocket 接收到二進位圖片資料（Blob/ArrayBuffer）時，最直接的顯示方式是將其轉為 data:image/...;base64,... 格式賦給 <img> 的 src 屬性。現代瀏覽器支援直接將 Blob 物件建立 Object URL，更高效且不需 Base64 編碼轉換。

方法一：Blob + createObjectURL（推薦，效能佳）

<img id="img" />
<script>
const ws = new WebSocket('ws://192.168.0.171:1235');
ws.binaryType = 'blob'; // 關鍵：指定接收二進位為 Blob

ws.onmessage = (e) => {
  const blob = e.data; // 已是 Blob 物件
  const url = URL.createObjectURL(blob);
  document.getElementById('img').src = url;
  // 可選：圖片載入後釋放 URL
  // document.getElementById('img').onload = () => URL.revokeObjectURL(url);
};
</script>

方法二：ArrayBuffer 轉 Base64（兼容舊瀏覽器）

ws.binaryType = 'arraybuffer';
ws.onmessage = (e) => {
  const bytes = new Uint8Array(e.data);
  let binary = '';
  for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
  const base64 = btoa(binary);
  // 根據實際圖片格式調整 MIME：image/jpeg, image/png, image/gif 等
  document.getElementById('img').src = `data:image/jpeg;base64,${base64}`;
};

關鍵點提醒

• 設定 binaryType：必須在 ws.onopen 前設為 'blob' 或 'arraybuffer'，否則預設接收字串導致二進位資料損壞。
• MIME 類型：data:image/... 前綴必須與實際圖片格式一致（jpeg/png/gif/webp），否則瀏覽器無法解碼顯示。
• 記憶體管理：使用 createObjectURL 時，適當時機（如元件卸載、切換圖片）呼叫 URL.revokeObjectURL() 釋放記憶體。

採用 Blob + Object URL 方式，程式碼簡潔、效能最佳，是現代 Web 應用處理 WebSocket 圖片串流的標準做法。