Ini termasuk kemampuan untuk mengubah atribut src
gambar ke nilai baru, memungkinkan Anda mengubah gambar yang sedang dimuat
Dalam posting ini, kita akan belajar bagaimana kita dapat menggunakan JavaScript untuk mengubah atribut src
dari suatu gambar
Mari kita asumsikan ini adalah DOM kita
Langkah pertama adalah menanyakan DOM untuk gambar ini. Kita dapat melakukan ini dengan menggunakan metode querySelector[]
const image = document.querySelector[".image"];
_Sekarang kita memiliki elemen kita, kita dapat mengubah src
atribut gambar
const image = document.querySelector[".image"];
image.src = "dog.png";
Ini mengubah DOM menjadi ini
Terkadang, Anda ingin menjalankan beberapa kode setelah gambar dimuat. Untungnya, hal ini dapat dilakukan dengan mudah hanya dengan menambahkan event listener ke gambar
const image = document.querySelector[".image"];
image.addEventListener["load", [] => {
console.log["The image has loaded!"];
}];
_Sekarang, ketika gambar telah dimuat, fungsi akan dijalankan, mencetak ke konsol. Anda dapat melakukan apapun yang Anda inginkan, termasuk mengubah src
atribut gambar ke gambar lain
Dalam posting ini, kita telah melihat bagaimana kita dapat menggunakan JavaScript untuk mengubah atribut src
dari suatu gambar
Jika mau, Anda juga dapat menjalankan beberapa kode setelah gambar dimuat
Semoga Anda menikmati postingan ini, terima kasih telah membaca
Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami
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 sumbernyaMengimpor gambar ke kanvas pada dasarnya adalah proses dua langkah
- Dapatkan referensi ke objek
5 atau ke elemen kanvas lain sebagai sumber. Dimungkinkan juga untuk menggunakan gambar dengan memberikan URLconst img = new Image[]; // Create new img element img.addEventListener[ "load", [] => { // execute drawImage statements here }, false ]; img.src = "myImage.png"; // Set source path
- Gambarlah gambar di kanvas menggunakan fungsi
6const img = new Image[]; // Create new img element img.addEventListener[ "load", [] => { // execute drawImage statements here }, false ]; img.src = "myImage.png"; // Set source path
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
5Ini 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
9const img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
_0Ini adalah gambar yang disematkan menggunakan elemen
const img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
1const img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
_2Menggunakan 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 gambarconst img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
_4Anda 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 Andaconst img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
_6Gambar 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==";
_7Jenis 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 penggunaconst img = new Image[]; // Create new img element
img.src =
"data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
_9Gambar 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
_0function getMyVideo[] { const canvas = document.getElementById["canvas"]; if [canvas.getContext] { const ctx = canvas.getContext["2d"]; return document.getElementById["myvideo"]; } }
- Metode
_1function getMyVideo[] { const canvas = document.getElementById["canvas"]; if [canvas.getContext] { const ctx = canvas.getContext["2d"]; return document.getElementById["myvideo"]; } }
- Jika Anda mengetahui ID dari gambar spesifik yang ingin Anda gunakan, Anda dapat menggunakan
2 untuk mengambil gambar spesifik tersebutfunction getMyVideo[] { const canvas = document.getElementById["canvas"]; if [canvas.getContext] { const ctx = canvas.getContext["2d"]; return document.getElementById["myvideo"]; } }
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 AndaSalah 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 ________5______8 yang nyamanconst 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 dimuatconst 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 melakukannyafunction 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 kanvasSetelah 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
_7Menggambar gambar yang ditentukan oleh parameter
_8 pada koordinat [
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 element.
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
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 langsungVarian 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 kanvasfunction 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";
}
_4Ini 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 kanvasDalam 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 pikselCatatan. 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
function draw[] {
const ctx = document.getElementById["canvas"].getContext["2d"];
const img = new Image[];
img.onload = [] => {
for [let i = 0; i
_0Diberi
8, fungsi ini mengambil luas gambar sumber yang ditentukan oleh persegi panjang yang sudut kiri atas adalah [
2,
3] dan lebar dan tingginya adalah
4 dan
5 dan menggambarnya 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
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 {
// 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 sekelilingnyaDalam 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
_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
0Dan 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
1Mengikat 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
2Seperti disebutkan sebelumnya, penskalaan gambar dapat menghasilkan artefak kabur atau kotak-kotak karena proses penskalaan. Anda dapat menggunakan properti
1 konteks gambar untuk mengontrol penggunaan algoritme penghalusan gambar saat menskalakan gambar dalam konteks Anda. Secara default, ini adalah
_2, artinya gambar akan diperhalus saat diskalakan. Anda dapat menonaktifkan fitur ini seperti ini