EasyImage
← Danh sách blog

Cách triển khai tính năng thay đổi kích thước ảnh trên web với EasyImage.work

Mar 16, 2025

Bạn đã bao giờ cảm thấy bực mình vì những ảnh lớn làm chậm website của mình chưa? Hoặc cần những kích thước ảnh khác nhau cho các tình huống hiển thị khác nhau? Tại EasyImage.work, chúng tôi hiểu tầm quan trọng của việc xử lý ảnh, đó là lý do tại sao chúng tôi cam kết cung cấp cho bạn những công cụ xử lý ảnh trực tuyến đơn giản và hiệu quả. Hôm nay, hãy cùng đi sâu vào kỹ thuật để xem cách bạn có thể dễ dàng triển khai tính năng thay đổi kích thước ảnh trên web, giống như chúng tôi đã làm tại EasyImage.work!

Sự cần thiết của việc thay đổi kích thước ảnh

Ảnh có mặt khắp nơi trong các ứng dụng internet. Tuy nhiên, các tình huống khác nhau có yêu cầu khác nhau về kích thước ảnh:

  • Tối ưu hóa tải trang web: Ảnh lớn có thể làm chậm việc tải trang, ảnh hưởng đến trải nghiệm người dùng.
  • Thiết kế responsive: Các thiết bị khác nhau có kích thước màn hình khác nhau, cần các kích thước ảnh khác nhau để hiển thị phù hợp.
  • Hiển thị thumbnail: Trong các tình huống danh sách hoặc xem trước, cần những thumbnail nhỏ hơn để tiết kiệm không gian và băng thông.

Do đó, việc triển khai tính năng thay đổi kích thước ảnh hiệu quả trên web là rất quan trọng.

Những hiểu biết kỹ thuật đằng sau EasyImage.work

Bạn có thể tò mò về cách EasyImage.work nhanh chóng tạo ra các thumbnail và ảnh đã thay đổi kích thước với nhiều kích thước khác nhau trực tiếp trong trình duyệt. Hôm nay, chúng tôi sẽ tiết lộ bí mật bằng cách xem xét một ví dụ code JavaScript cốt lõi.

// Xử lý ảnh
const processImage = async (file: File) => {
  processing.value = true;
  processedImages.value = [];

  const img = new Image();
  const reader = new FileReader();

  return new Promise<void>((resolve) => {
    reader.onload = (e) => {
      img.src = String(e.target?.result);
    };

    img.onload = async () => {
      const originalWidth = img.naturalWidth;
      const originalHeight = img.naturalHeight;
      const mimeType = file.type;

      let width = originalWidth;
      let height = originalHeight;
      let n = 0;

      // Giảm theo lũy thừa của 2 cho đến khi chiều rộng hoặc chiều cao nhỏ hơn 64
      while (width >= 64 && height >= 64) {
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        if (!ctx) break;

        ctx.drawImage(img, 0, 0, width, height);
        const dataUrl = canvas.toDataURL(mimeType);

        // Tạo thumbnail
        const thumbCanvas = document.createElement("canvas");
        const thumbCtx = thumbCanvas.getContext("2d");
        if (!thumbCtx) break;

        const maxWidth = 250;
        const maxHeight = 200;
        let thumbWidth = width;
        let thumbHeight = height;

        if (thumbWidth > maxWidth || thumbHeight > maxHeight) {
          const ratio = Math.min(
            maxWidth / thumbWidth,
            maxHeight / thumbHeight
          );
          thumbWidth = thumbWidth * ratio;
          thumbHeight = thumbHeight * ratio;
        }

        thumbCanvas.width = thumbWidth;
        thumbCanvas.height = thumbHeight;
        thumbCtx.drawImage(canvas, 0, 0, thumbWidth, thumbHeight);

        processedImages.value.push({
          width,
          height,
          original: dataUrl,
          thumbnail: thumbCanvas.toDataURL(mimeType),
          name: `${file.name.split(".")[0]}_${width}x${height}.${file.name
            .split(".")
            .pop()}`,
        });

        n++;
        width = Math.floor(originalWidth / Math.pow(2, n));
        height = Math.floor(originalHeight / Math.pow(2, n));
      }

      processing.value = false;
      resolve();
    };

    reader.readAsDataURL(file);
  });
};

Giải thích code

  1. Đọc file ảnh: Code đầu tiên sử dụng FileReader để đọc file ảnh được upload bởi người dùng và chuyển đổi nó thành Data URL.
  2. Tạo đối tượng Image: Sau đó, sử dụng đối tượng Image để tải ảnh để lấy kích thước gốc (naturalWidth và naturalHeight).
  3. Vòng lặp thay đổi kích thước: Phần cốt lõi là một vòng lặp while dần dần giảm kích thước ảnh theo lũy thừa của 2 cho đến khi chiều rộng hoặc chiều cao nhỏ hơn 64 pixel.
  4. Vẽ canvas: Trong mỗi lần lặp, một phần tử canvas được tạo ra, và ảnh đã thay đổi kích thước được vẽ lên đó. Phương thức toDataURL() của canvas chuyển đổi nội dung của nó thành Data URL, thu được dữ liệu ảnh.
  5. Tạo thumbnail: Để cung cấp ảnh xem trước nhỏ hơn, code cũng tạo ra các thumbnail. Nó tạo một phần tử canvas mới (thumbCanvas) và thay đổi kích thước ảnh theo tỷ lệ dựa trên chiều rộng và chiều cao tối đa được thiết lập trước (maxWidth và maxHeight).
  6. Lưu trữ kết quả: Dữ liệu ảnh đã xử lý (ảnh gốc đã thay đổi kích thước và thumbnail) của các kích thước khác nhau được lưu trữ trong một mảng (processedImages) để sử dụng sau này.

Ưu điểm của EasyImage.work

Code này chỉ là một trong những thành phần logic cốt lõi của tính năng thay đổi kích thước ảnh của EasyImage.work. Trong các ứng dụng thực tế, chúng tôi đã thực hiện nhiều tối ưu hóa và cải tiến, chẳng hạn như:

  • Hỗ trợ nhiều định dạng ảnh: EasyImage.work hỗ trợ không chỉ các định dạng phổ biến như JPEG và PNG mà còn cả GIF và nhiều định dạng khác.
  • Chiến lược thay đổi kích thước linh hoạt hơn: Bên cạnh việc thay đổi kích thước theo lũy thừa của 2, chúng tôi cung cấp nhiều tùy chọn khác nhau như kích thước tùy chỉnh và thay đổi kích thước theo tỷ lệ để đáp ứng các nhu cầu khác nhau của bạn.
  • Hiệu suất tốt hơn: Chúng tôi đã tối ưu hóa sâu code của mình để đảm bảo xử lý ảnh nhanh và hiệu quả ngay cả trong trình duyệt.
  • Giao diện đơn giản và thân thiện với người dùng: Với EasyImage.work, bạn không cần viết bất kỳ code nào. Chỉ cần upload ảnh của bạn, chọn kích thước thay đổi mong muốn, và dễ dàng hoàn thành thao tác.

Kết luận

Thông qua phần giới thiệu này, bạn giờ đây nên có hiểu biết tốt hơn về cách triển khai tính năng thay đổi kích thước ảnh trên web. Mặc dù đây chỉ là phần nổi của tảng băng, nhưng nó thể hiện chuyên môn của EasyImage.work trong công nghệ xử lý ảnh.

Nếu bạn cần một công cụ xử lý ảnh trực tuyến đơn giản, hiệu quả và mạnh mẽ, hãy nhớ đến EasyImage.work! Chúng tôi sẽ tiếp tục làm việc chăm chỉ để mang đến cho bạn nhiều tính năng xử lý ảnh tiện lợi và thực tế hơn, làm cho ảnh của bạn tỏa sáng trong thế giới web!