Cara mengatur id gambar di javascript

Question

Hingga saat ini kami telah membuat bentuk kami sendiri dan menerapkan gaya padanya. Salah satu fitur yang lebih menarik dari

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

4 adalah kemampuan untuk menggunakan gambar. Ini dapat digunakan untuk melakukan pengomposisian foto dinamis atau sebagai latar belakang grafik, untuk sprite dalam game, dan sebagainya. Gambar eksternal dapat digunakan dalam format apa pun yang didukung oleh browser, seperti PNG, GIF, atau JPEG. Anda bahkan dapat menggunakan gambar yang dihasilkan oleh elemen kanvas lain di halaman yang sama dengan sumbernya

Table of Contents Show

Bagaimana cara mengatur atribut gambar dalam JavaScript?
Apa ID gambar dalam JavaScript?
Bagaimana cara menambahkan id dalam JavaScript?
Bagaimana cara menambahkan tag gambar di JavaScript?

Mengimpor gambar ke kanvas pada dasarnya adalah proses dua langkah

Dapatkan referensi ke objek

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_5 atau ke elemen kanvas lain sebagai sumber. Dimungkinkan juga untuk menggunakan gambar dengan memberikan URL

Gambarlah gambar di kanvas menggunakan fungsi

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

6

Mari kita lihat bagaimana melakukan ini

API kanvas dapat menggunakan salah satu dari tipe data berikut sebagai sumber gambar

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

5

Ini adalah gambar yang dibuat menggunakan konstruktor

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_8, serta elemen

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

9

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_0

Ini adalah gambar yang disematkan menggunakan elemen

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_1

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_2

Menggunakan elemen HTML

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_3 sebagai sumber gambar Anda mengambil bingkai saat ini dari video dan menggunakannya sebagai gambar

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_4

Anda dapat menggunakan elemen

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_4 lain sebagai sumber gambar Anda

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_6

Gambar bitmap, akhirnya dipotong. Jenis seperti itu digunakan untuk mengekstraksi bagian dari suatu gambar, sprite, dari gambar yang lebih besar

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_7

Jenis khusus

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_4 yang tidak ditampilkan dan disiapkan tanpa ditampilkan. Menggunakan sumber gambar seperti itu memungkinkan untuk beralih ke sana tanpa komposisi konten yang dapat dilihat oleh pengguna

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_9

Gambar yang mewakili satu bingkai video

Ada beberapa cara untuk mendapatkan gambar untuk digunakan pada kanvas

Kita bisa mendapatkan referensi gambar pada halaman yang sama dengan kanvas dengan menggunakan salah satu

Koleksi

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

0

Metode

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

_1

Jika Anda mengetahui ID dari gambar spesifik yang ingin Anda gunakan, Anda dapat menggunakan

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

2 untuk mengambil gambar spesifik tersebut

Menggunakan atribut elemen

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

9 (direfleksikan oleh properti

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

5), Anda dapat meminta izin untuk memuat gambar dari domain lain untuk digunakan dalam panggilan Anda ke

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

6. Jika domain hosting mengizinkan akses lintas domain ke gambar, gambar tersebut dapat digunakan di kanvas Anda tanpa mencemarinya;

Sama seperti gambar normal, kami mengakses elemen kanvas lainnya menggunakan metode

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

1 atau

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

2. Pastikan Anda telah menggambar sesuatu ke kanvas sumber sebelum menggunakannya di kanvas target Anda

Salah satu penggunaan yang lebih praktis dari ini adalah menggunakan elemen kanvas kedua sebagai tampilan thumbnail dari kanvas lain yang lebih besar

Opsi lainnya adalah membuat objek

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_5 baru di skrip kita. Untuk melakukan ini, Anda dapat menggunakan konstruktor ________0______8 yang nyaman

const img = new Image(); // Create new img element
img.src = "myImage.png"; // Set source path

Saat skrip ini dijalankan, gambar mulai dimuat

Jika Anda mencoba menelepon

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_6 sebelum gambar selesai dimuat, gambar tidak akan melakukan apa pun (atau, di browser lama, bahkan mungkin memunculkan pengecualian). Jadi, Anda harus memastikan untuk menggunakan peristiwa pemuatan sehingga Anda tidak mencoba ini sebelum gambar dimuat

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

Jika Anda hanya menggunakan satu gambar eksternal, ini bisa menjadi pendekatan yang baik, tetapi setelah Anda perlu melacak lebih dari satu, kami perlu menggunakan sesuatu yang lebih pintar. Ini di luar cakupan tutorial ini untuk melihat taktik pra-pemuatan gambar, tetapi Anda harus mengingatnya

Cara lain yang mungkin untuk menyertakan gambar adalah melalui data. URL. URL data memungkinkan Anda untuk sepenuhnya mendefinisikan gambar sebagai string karakter yang disandikan Base64 langsung di kode Anda

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_

Salah satu keuntungan dari URL data adalah bahwa gambar yang dihasilkan segera tersedia tanpa bolak-balik lagi ke server. Keuntungan potensial lainnya adalah memungkinkan untuk mengenkapsulasi semua CSS, JavaScript, HTML, dan gambar Anda dalam satu file, membuatnya lebih portabel ke lokasi lain.

Beberapa kelemahan dari metode ini adalah gambar Anda tidak di-cache, dan untuk gambar yang lebih besar, URL yang disandikan bisa menjadi sangat panjang

Anda juga dapat menggunakan bingkai dari video yang disajikan oleh elemen

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

3 (bahkan jika video tidak terlihat). Misalnya, jika Anda memiliki elemen

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_3 dengan ID "myvideo", Anda dapat melakukannya

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

Ini mengembalikan objek

const img = new Image(); // Create new img element
img.src =
  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";

_2 untuk video, yang, seperti yang dibahas sebelumnya, dapat digunakan sebagai sumber gambar untuk kanvas

Setelah kami memiliki referensi ke objek gambar sumber kami, kami dapat menggunakan metode

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

6 untuk merendernya ke kanvas. Seperti yang akan kita lihat nanti, metode

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_6 kelebihan beban dan memiliki beberapa varian. Dalam bentuknya yang paling dasar, tampilannya seperti ini

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>

7

Menggambar gambar yang ditentukan oleh parameter

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>

_8 pada koordinat (

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>

9,

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

0)

Note: SVG images must specify a width and height in the root

Dalam contoh berikut, kita akan menggunakan gambar eksternal sebagai latar untuk grafik garis kecil. Menggunakan latar belakang dapat membuat skrip Anda jauh lebih kecil karena kami dapat menghindari kebutuhan akan kode untuk menghasilkan latar belakang. Dalam contoh ini, kami hanya menggunakan satu gambar, jadi saya menggunakan event handler

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

1 objek gambar untuk mengeksekusi pernyataan menggambar. Metode

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

6 menempatkan latar belakang pada koordinat (0, 0), yang merupakan sudut kiri atas kanvas

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

Grafik yang dihasilkan terlihat seperti ini

Tangkapan layarSampel langsung

Varian kedua dari metode

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_6 menambahkan dua parameter baru dan memungkinkan kita menempatkan gambar berskala di kanvas

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

4

Ini menambahkan parameter

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

5 dan

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

6, yang menunjukkan ukuran skala gambar saat menggambarnya ke kanvas

Dalam contoh ini, kami akan menggunakan gambar sebagai wallpaper dan mengulanginya beberapa kali di kanvas. Ini dilakukan dengan mengulang dan menempatkan gambar yang diskalakan pada posisi yang berbeda. Dalam kode di bawah ini, loop

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

_7 pertama berulang di atas baris. Loop

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = "backdrop.png";
}

_7 kedua berulang di atas kolom. Gambar diskalakan menjadi sepertiga dari ukuran aslinya, yaitu 50x38 piksel

Catatan. Gambar dapat menjadi buram saat diperbesar atau berbintik jika diperkecil terlalu banyak. Penskalaan mungkin sebaiknya tidak dilakukan jika Anda memiliki beberapa teks di dalamnya yang harus tetap terbaca

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.drawImage(img, j * 50, i * 38, 50, 38);
      }
    }
  };
  img.src = "rhino.jpg";
}

Kanvas yang dihasilkan terlihat seperti ini

Tangkapan layarSampel langsung

Varian ketiga dan terakhir dari metode

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_6 memiliki delapan parameter selain sumber gambar. Ini memungkinkan kita memotong bagian dari gambar sumber, lalu menskalakan dan menggambarnya di kanvas kita

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

0

Diberi

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>

8, fungsi ini mengambil luas gambar sumber yang ditentukan oleh persegi panjang yang sudut kiri atas adalah (

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

2,

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

3) dan yang lebar dan tingginya adalah

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

4 dan

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

5 dan menariknya ke dalam kanvas, menempatkannya di atas kanvas di

Untuk benar-benar memahami apa fungsinya, mungkin membantu untuk melihat gambar ini

Empat parameter pertama menentukan lokasi dan ukuran irisan pada gambar sumber. Empat parameter terakhir menentukan persegi panjang untuk menggambar gambar di kanvas tujuan

Mengiris bisa menjadi alat yang berguna saat Anda ingin membuat komposisi. Anda dapat memiliki semua elemen dalam satu file gambar dan menggunakan metode ini untuk menggabungkan gambar yang lengkap. Misalnya, jika Anda ingin membuat bagan, Anda dapat memiliki gambar PNG yang berisi semua teks yang diperlukan dalam satu file dan bergantung pada data Anda dapat mengubah skala bagan Anda dengan cukup mudah. Keuntungan lainnya adalah Anda tidak perlu memuat setiap gambar satu per satu, yang dapat meningkatkan kinerja pemuatan

Dalam contoh ini, kita akan menggunakan badak yang sama seperti pada contoh sebelumnya, tetapi kita akan mengiris kepalanya dan menyusunnya menjadi bingkai foto. Gambar bingkai foto adalah PNG 24-bit yang mencakup bayangan jatuh. Karena gambar PNG 24-bit menyertakan saluran alfa 8-bit penuh, tidak seperti gambar GIF dan PNG 8-bit, gambar ini dapat ditempatkan di latar belakang apa pun tanpa mengkhawatirkan warna matte

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    </div>
  </body>
</html>

function draw() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // Draw slice
  ctx.drawImage(
    document.getElementById("source"),
    33,
    71,
    104,
    124,
    21,
    20,
    87,
    104
  );

  // Draw frame
  ctx.drawImage(document.getElementById("frame"), 0, 0);
}

Kami mengambil pendekatan berbeda untuk memuat gambar kali ini. Alih-alih memuatnya dengan membuat objek

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_5 baru, kami menyertakannya sebagai tag

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

9 langsung di sumber HTML kami dan mengambil gambar dari itu. Gambar disembunyikan dari keluaran dengan menyetel properti CSS

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.drawImage(img, j * 50, i * 38, 50, 38);
      }
    }
  };
  img.src = "rhino.jpg";
}

2 menjadi tidak ada untuk gambar tersebut

ScreenshotLive sample

Skrip itu sendiri sangat sederhana. Setiap

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_9 diberi atribut ID, yang membuatnya mudah untuk dipilih menggunakan

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

2. Kami kemudian menggunakan

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_6 untuk mengiris badak dari gambar pertama dan menskalakannya ke kanvas, lalu menggambar bingkai di atas menggunakan panggilan

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

6 kedua.

Dalam contoh terakhir bab ini, kita akan membuat sebuah galeri seni kecil. Galeri tersebut terdiri dari sebuah meja yang berisi beberapa gambar. Saat halaman dimuat, elemen

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_4 disisipkan untuk setiap gambar dan sebuah bingkai digambar di sekelilingnya

Dalam hal ini, setiap gambar memiliki lebar dan tinggi tetap, seperti halnya bingkai yang digambar di sekelilingnya. Anda dapat menyempurnakan skrip sehingga menggunakan lebar dan tinggi gambar untuk membuat bingkai pas di sekelilingnya

Kode di bawah ini harus cukup jelas. Kami mengulang wadah

function getMyVideo() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    return document.getElementById("myvideo");
  }
}

_0 dan menambahkan elemen kanvas baru yang sesuai. Mungkin satu-satunya hal yang perlu diperhatikan, bagi mereka yang tidak begitu paham dengan DOM, adalah penggunaan metode

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const img = new Image();
  img.onload = () => {
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.drawImage(img, j * 50, i * 38, 50, 38);
      }
    }
  };
  img.src = "rhino.jpg";
}

9.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    </div>
  </body>
</html>

0 adalah metode simpul induk (sel tabel) dari elemen (gambar) sebelum kita ingin memasukkan simpul baru kita (elemen kanvas)

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

0

Dan inilah beberapa CSS untuk membuat semuanya terlihat bagus

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_1

Mengikat semuanya adalah JavaScript untuk menggambar gambar berbingkai kami

const img = new Image(); // Create new img element
img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false
);
img.src = "myImage.png"; // Set source path

_2

Seperti disebutkan sebelumnya, penskalaan gambar dapat menghasilkan artefak kabur atau kotak-kotak karena proses penskalaan. Anda dapat menggunakan properti

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    </div>
  </body>
</html>

1 konteks gambar untuk mengontrol penggunaan algoritme perataan gambar saat menskalakan gambar dalam konteks Anda. Secara default, ini adalah

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    </div>
  </body>
</html>