65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
/** 會員頭像：本機選檔 → 壓縮成可存 localStorage 的 data URL */
|
||
|
||
const MAX_INPUT_BYTES = 5 * 1024 * 1024;
|
||
const MAX_EDGE = 256;
|
||
const JPEG_QUALITY = 0.86;
|
||
|
||
function loadImageFromFile(file: File): Promise<HTMLImageElement> {
|
||
return new Promise((resolve, reject) => {
|
||
const url = URL.createObjectURL(file);
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
URL.revokeObjectURL(url);
|
||
resolve(img);
|
||
};
|
||
img.onerror = () => {
|
||
URL.revokeObjectURL(url);
|
||
reject(new Error("無法讀取圖片"));
|
||
};
|
||
img.src = url;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 將本機圖片裁成正方形、縮到 ≤256px，輸出 JPEG data URL。
|
||
* mock 階段不真上傳；存進租戶會員紀錄。
|
||
*/
|
||
export async function fileToMemberAvatarDataUrl(file: File): Promise<string> {
|
||
if (!file.type.startsWith("image/")) {
|
||
throw new Error("請選擇圖片檔（JPG／PNG／WebP）");
|
||
}
|
||
if (file.size > MAX_INPUT_BYTES) {
|
||
throw new Error("圖片請在 5MB 以內");
|
||
}
|
||
|
||
const img = await loadImageFromFile(file);
|
||
const srcW = img.naturalWidth || img.width;
|
||
const srcH = img.naturalHeight || img.height;
|
||
if (!srcW || !srcH) throw new Error("無法讀取圖片尺寸");
|
||
|
||
const side = Math.min(srcW, srcH);
|
||
const sx = Math.floor((srcW - side) / 2);
|
||
const sy = Math.floor((srcH - side) / 2);
|
||
const edge = Math.min(MAX_EDGE, side);
|
||
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = edge;
|
||
canvas.height = edge;
|
||
const ctx = canvas.getContext("2d");
|
||
if (!ctx) throw new Error("瀏覽器不支援圖片處理");
|
||
|
||
ctx.imageSmoothingEnabled = true;
|
||
ctx.imageSmoothingQuality = "high";
|
||
ctx.drawImage(img, sx, sy, side, side, 0, 0, edge, edge);
|
||
|
||
const dataUrl = canvas.toDataURL("image/jpeg", JPEG_QUALITY);
|
||
if (!dataUrl.startsWith("data:image/")) throw new Error("壓縮失敗");
|
||
if (dataUrl.length > 400_000) {
|
||
// 再壓一輪
|
||
const smaller = canvas.toDataURL("image/jpeg", 0.7);
|
||
if (smaller.length > 400_000) throw new Error("頭像仍過大，請換較簡單的圖");
|
||
return smaller;
|
||
}
|
||
return dataUrl;
|
||
}
|