Charonyu's Profile

這篇的重點，使用canvas優化照片大小與Blob VS DataURL

前端照片優化選項

縮小照片尺寸

降低畫質

檔案格式轉換：轉為 JPEG 或 WebP。JPEG 可能會有一些失真，但文件較小；WebP 品質更好，但只有 98% 的瀏覽器支持

縮小照片尺寸

使用 <canvas> 元素來等比例縮小照片。以下是一個簡單的 JavaScript 範例：


jsxCopy code
const maxWidth = 540;  // 設定目標最大寬度
const scaleFactor = maxWidth / image.width;  // 計算縮放因子

// 創建一個 canvas 元素並設定其尺寸
const canvas = document.createElement('canvas');
canvas.width = image.width * scaleFactor;
canvas.height = image.height * scaleFactor;

// 繪制縮放後的圖像
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

降低畫質和檔案格式轉換

使用 toDataURL() 或 toBlob() 方法來降低畫質或轉換文件格式。

toBlob

非同步操作：toBlob 是一個異步方法，它接受一個回調函數，該回調函數將在圖像數據準備好後被調用。

效能和內存使用：通常來說，toBlob 更為高效，因為它直接生成一個 Blob 對象，而不需要先將圖像數據轉換為 Base64 字符串。

檔案格式支持：它允許你選擇輸出的圖像格式，包括 image/png、image/jpeg 和 image/webp。

品質調整：你可以指定一個品質參數，這是一個介於 0 和 1 之間的數字，用於控制輸出圖像的品質。


javascriptCopy code
canvas.toBlob((blob) => {
    const imageUrl = URL.createObjectURL(blob);
}, 'image/jpeg', 0.8);

toDataURL

同步操作：toDataURL 是一個同步方法，會立即返回一個包含圖像數據的 Base64 編碼的 URL 字符串。

效能和內存使用：生成 Base64 字符串可能會增加內存使用量和CPU負擔。

檔案格式支持：通常僅支持 image/png 和 image/jpeg。

品質調整：也可以指定一個品質參數。


javascriptCopy code
const dataURL = canvas.toDataURL('image/jpeg', 0.8);

總結，toBlob 通常在處理大文件或需要更多格式支持時更為高效，而 toDataURL 則提供了一種更簡單但可能較低效的方式來獲取圖像數據。選擇哪一個取決於你的具體需求和應用場景。

Data URL: 通常以 "data:" 開頭，例如 data:image/png;base64,...，可以表示檔案數據

Blob URL: 通常以 "blob:" 開頭，例如 blob:http://...

讀取file:


const reader = new FileReader();
reader.onloadend = () => {     
	console.log(reader.result);
};
reader.readAsDataURL(file);

使用 FileReader 的 readAsDataURL() 方法會讓 reader.result 包含一個表示檔案數據的 Data URL。這個 Data URL 是一個 base64 編碼的字符串，您可以直接將它用於圖像預覽或其他用途。

當 reader.onloadend 事件觸發後，reader.result 就會包含這個 Data URL。您可以確信 reader.result 這時是一個 Data URL，不是 Blob URL

BlobURL轉成FILE:


export async function blobURLtoFile(blobUrl, fileName) {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  return new File([blob], fileName, { type: blob.type });
}

DataURL轉乘FILE:


export function dataURLtoFile(dataURL, fileName) {
  if (!dataURL || !fileName) {
    throw new Error("Invalid parameters");
  }
  const base64 = dataURL.split(",")[1];
  const buffer = Buffer.from(base64, "base64");
	const match = dataURL.match(/^data:(.+);base64,/);
  return new File([buffer], fileName, { type: match[1] });
}

照片優化(使用Canvas篇)