Membuat Gambar dalam bentuk canvas untuk manga

Get Started > Details
  • Details
  • Install

Deskripsi.

Kode ini membuat gambar menjadi bentuk canvas.

Untuk mengoptimalkan kinerja:

  • Kompres file gambar sebelum diunggah ke situs. Tools seperti TinyPNG atau JPEG-Optimizer dapat mengurangi ukuran file tanpa terlalu banyak mengurangi kualitas, sehingga gambar akan lebih cepat dimuat.
  • Gunakan format gambar seperti WebP, yang menawarkan kompresi yang lebih baik dengan kualitas gambar yang lebih baik dibandingkan format lama seperti JPG atau PNG.
  • Batasi penggunaan gambar yang berlebih, semakin banyak gambar maka akan semakin lama juga pemuatan canvas.

  • Pasang kode ini di atas tag </body>.

    const imageBox = document.querySelector(".image_box");

const loadImagesSequentially = async () => {
  for (let i = 0; i < img.length; i++) {
    await loadImageToCanvas(img[i]);
  }
};

const loadImageToCanvas = (imageSrc) => {
  return new Promise((resolve) => {
    const imgElement = new Image();
    imgElement.src = imageSrc;

    imgElement.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = imgElement.width;
      canvas.height = imgElement.height;
      ctx.drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);
      imageBox.appendChild(canvas);

      canvas.addEventListener("contextmenu", (e) => {
        e.preventDefault();
      });

      resolve();
    };
  });
};

window.addEventListener("load", loadImagesSequentially);

  • buat array sebagai wadah gambar dengan format seperti ini. bisa juga diletakkan dalam postingan.

    let img = [
  "image 1.jpg",
  "image 2.jpg",
  "image 3.jpg",
  "image 4.jpg",
  "image 5.jpg",
  ...
];

  • Terakhir buat tag HTML ini, bisa letakan didalam postingan. dan untuk CSS bisa disesuaikan dengan kebutuhan.

    <div class="image_box"></div>

Comments