Image Compression & Canvas Resizing: Giảm dung lượng ảnh trực tiếp trên trình duyệt

Image Compression & Canvas Resizing: Giảm dung lượng ảnh trực tiếp trên trình duyệt | Shanverse

Codetypescript

1const ACCEPTED_TYPES = new Set([2  "image/jpeg",3  "image/png",4  "image/webp",5]);67function validateImageFile(file: File): void {8  if (!ACCEPTED_TYPES.has(file.type)) {9    throw new Error("Unsupported image type");10  }1112  if (file.size > 25 * 1024 * 1024) {13    throw new Error("File is too large");14  }15}

Codetypescript

1async function decodeWithImageElement(file: Blob): Promise<HTMLImageElement> {2  const url = URL.createObjectURL(file);34  try {5    const image = new Image();6    image.decoding = "async";7    image.src = url;8    await image.decode();9    return image;10  } finally {11    URL.revokeObjectURL(url);12  }13}

Codetypescript

1type Dimensions = {2  width: number;3  height: number;4};56function fitInside(7  sourceWidth: number,8  sourceHeight: number,9  maxWidth: number,10  maxHeight: number,11  allowUpscale = false,12): Dimensions {13  const scale = Math.min(14    maxWidth / sourceWidth,15    maxHeight / sourceHeight,16    allowUpscale ? Infinity : 1,17  );1819  return {20    width: Math.max(1, Math.round(sourceWidth * scale)),21    height: Math.max(1, Math.round(sourceHeight * scale)),22  };23}

Codetypescript

1function coverCrop(2  sourceWidth: number,3  sourceHeight: number,4  targetWidth: number,5  targetHeight: number,6) {7  const sourceRatio = sourceWidth / sourceHeight;8  const targetRatio = targetWidth / targetHeight;910  if (sourceRatio > targetRatio) {11    const cropWidth = sourceHeight * targetRatio;12    return {13      sx: (sourceWidth - cropWidth) / 2,14      sy: 0,15      sw: cropWidth,16      sh: sourceHeight,17    };18  }1920  const cropHeight = sourceWidth / targetRatio;21  return {22    sx: 0,23    sy: (sourceHeight - cropHeight) / 2,24    sw: sourceWidth,25    sh: cropHeight,26  };27}

Codetypescript

1type CanvasSource = ImageBitmap | HTMLImageElement;23function drawResized(4  source: CanvasSource,5  width: number,6  height: number,7  background?: string,8): HTMLCanvasElement {9  const canvas = document.createElement("canvas");10  canvas.width = width;11  canvas.height = height;1213  const context = canvas.getContext("2d", { alpha: background === undefined });14  if (!context) throw new Error("2D canvas is unavailable");1516  if (background) {17    context.fillStyle = background;18    context.fillRect(0, 0, width, height);19  }2021  context.imageSmoothingEnabled = true;22  context.imageSmoothingQuality = "high";23  context.drawImage(source, 0, 0, width, height);2425  return canvas;26}

Codetypescript

1function progressiveDownscale(2  source: CanvasImageSource,3  sourceWidth: number,4  sourceHeight: number,5  targetWidth: number,6  targetHeight: number,7): HTMLCanvasElement {8  let current = document.createElement("canvas");9  current.width = sourceWidth;10  current.height = sourceHeight;11  current.getContext("2d")!.drawImage(source, 0, 0);1213  while (14    current.width / 2 > targetWidth &&15    current.height / 2 > targetHeight16  ) {17    const next = document.createElement("canvas");18    next.width = Math.max(targetWidth, Math.floor(current.width / 2));19    next.height = Math.max(targetHeight, Math.floor(current.height / 2));2021    const context = next.getContext("2d")!;22    context.imageSmoothingEnabled = true;23    context.imageSmoothingQuality = "high";24    context.drawImage(current, 0, 0, next.width, next.height);2526    current.width = 1;27    current.height = 1;28    current = next;29  }3031  if (current.width === targetWidth && current.height === targetHeight) {32    return current;33  }3435  const output = document.createElement("canvas");36  output.width = targetWidth;37  output.height = targetHeight;38  const outputContext = output.getContext("2d")!;39  outputContext.imageSmoothingEnabled = true;40  outputContext.imageSmoothingQuality = "high";41  outputContext.drawImage(current, 0, 0, targetWidth, targetHeight);42  current.width = 1;43  current.height = 1;44  return output;45}

Codetypescript

1function canvasToBlob(2  canvas: HTMLCanvasElement,3  type: string,4  quality?: number,5): Promise<Blob> {6  return new Promise((resolve, reject) => {7    canvas.toBlob(8      (blob) => {9        if (!blob) {10          reject(new Error("Image encoding failed"));11          return;12        }13        resolve(blob);14      },15      type,16      quality,17    );18  });19}

Codetypescript

1type CompressOptions = {2  maxWidth: number;3  maxHeight: number;4  mimeType?: "image/jpeg" | "image/webp" | "image/png";5  quality?: number;6  allowUpscale?: boolean;7  jpegBackground?: string;8  maxMegapixels?: number;9};1011async function compressImage(12  file: File,13  options: CompressOptions,14): Promise<Blob> {15  validateImageFile(file);1617  const {18    maxWidth,19    maxHeight,20    mimeType = "image/webp",21    quality = 0.82,22    allowUpscale = false,23    jpegBackground = "#ffffff",24    maxMegapixels = 40,25  } = options;2627  if (!(quality >= 0 && quality <= 1)) {28    throw new Error("quality must be between 0 and 1");29  }3031  const bitmap = await createImageBitmap(file, {32    imageOrientation: "from-image",33  });3435  try {36    const megapixels = (bitmap.width * bitmap.height) / 1_000_000;37    if (megapixels > maxMegapixels) {38      throw new Error("Decoded image dimensions exceed the safety limit");39    }4041    const target = fitInside(42      bitmap.width,43      bitmap.height,44      maxWidth,45      maxHeight,46      allowUpscale,47    );4849    const background = mimeType === "image/jpeg"50      ? jpegBackground51      : undefined;5253    const canvas = drawResized(54      bitmap,55      target.width,56      target.height,57      background,58    );5960    try {61      const blob = await canvasToBlob(canvas, mimeType, quality);6263      if (blob.type !== mimeType) {64        throw new Error(`Requested encoder is unavailable: ${mimeType}`);65      }6667      return blob;68    } finally {69      // Release the backing store sooner on memory-constrained devices.70      canvas.width = 1;71      canvas.height = 1;72    }73  } finally {74    bitmap.close();75  }76}

Codetypescript

1const output = await compressImage(file, {2  maxWidth: 1920,3  maxHeight: 1920,4  mimeType: "image/webp",5  quality: 0.82,6  maxMegapixels: 40,7});89const formData = new FormData();10formData.append("image", output, "upload.webp");

Codetypescript

1async function encodeWithinBudget(2  canvas: HTMLCanvasElement,3  type: "image/jpeg" | "image/webp",4  maxBytes: number,5): Promise<Blob> {6  let low = 0.35;7  let high = 0.92;8  let best: Blob | undefined;910  for (let iteration = 0; iteration < 7; iteration++) {11    const quality = (low + high) / 2;12    const blob = await canvasToBlob(canvas, type, quality);1314    if (blob.size <= maxBytes) {15      best = blob;16      low = quality;17    } else {18      high = quality;19    }20  }2122  if (best) return best;23  throw new Error("Quality reduction alone cannot meet the byte budget");24}

Codetypescript

1// worker2self.onmessage = async (event) => {3  const { file, maxWidth, maxHeight } = event.data;4  const bitmap = await createImageBitmap(file);5  const target = fitInside(6    bitmap.width,7    bitmap.height,8    maxWidth,9    maxHeight,10  );1112  const canvas = new OffscreenCanvas(target.width, target.height);13  const context = canvas.getContext("2d")!;14  context.drawImage(bitmap, 0, 0, target.width, target.height);15  bitmap.close();1617  const blob = await canvas.convertToBlob({18    type: "image/webp",19    quality: 0.82,20  });2122  self.postMessage({ blob });23};

Codetypescript

1type ImageJobState =2  | { kind: "idle" }3  | { kind: "decoding" }4  | { kind: "resizing"; progress?: number }5  | { kind: "encoding" }6  | { kind: "done"; blob: Blob; previewUrl: string }7  | { kind: "error"; message: string };

Image Compression & Canvas Resizing: Giảm dung lượng ảnh trực tiếp trên trình duyệt

Resize, Compress và Encode khác nhau thế nào?

Pipeline chuẩn

Bình luận

Bước 1: Validate sớm

Bước 2: Decode ảnh

Bước 3: Tính dimension theo contain

Cover/crop

Bước 4: Resize bằng Canvas

Downscale nhiều bước

Bước 5: Encode thành Blob

Chọn định dạng

TypeScript utility hoàn chỉnh

Nén theo byte budget

OffscreenCanvas và Web Worker

CORS và tainted canvas

Metadata, EXIF và privacy

Animated image

Memory safety trên mobile

React/Vue integration

Client compression không phải security boundary

Đo hiệu quả

Test cases

Anti-patterns

Production checklist

Kết luận

Tài liệu tham khảo

Debounce & Throttle: Tối ưu UI và giảm API call cho Search, Scroll

Xây Virtual Classroom & Collaborative Whiteboard với Canvas/WebRTC

Content Security Policy trong Next.js: Chặn script lạ bằng CSP Header

Resize, Compress và Encode khác nhau thế nào?

Pipeline chuẩn

Bình luận

Bước 1: Validate sớm

Bước 2: Decode ảnh

Bước 3: Tính dimension theo contain

Cover/crop

Bước 4: Resize bằng Canvas

Downscale nhiều bước

Bước 5: Encode thành Blob

Chọn định dạng

TypeScript utility hoàn chỉnh

Nén theo byte budget

OffscreenCanvas và Web Worker

CORS và tainted canvas

Metadata, EXIF và privacy

Animated image

Memory safety trên mobile

React/Vue integration

Client compression không phải security boundary

Đo hiệu quả

Test cases

Anti-patterns

Production checklist

Kết luận

Tài liệu tham khảo

Bài viết liên quan

Debounce & Throttle: Tối ưu UI và giảm API call cho Search, Scroll

Xây Virtual Classroom & Collaborative Whiteboard với Canvas/WebRTC

Content Security Policy trong Next.js: Chặn script lạ bằng CSP Header