Tutorial Canvas (4): Menggunakan gambar

Penulis：Eve Cole Waktu Pembaruan：2025-05-25 13:48:02

Terapkan gambar menggunakan gambar

Salah satu fitur yang lebih menyenangkan dari kanvas adalah kemampuan untuk menggunakan gambar. Ini dapat digunakan untuk melakukan pengomposisian foto yang dinamis atau digunakan sebagai latar belakang grafik dll. Saat ini juga satu -satunya cara untuk menambahkan teks ke dalamnya (spesifikasinya tidak berisi fungsi apa pun untuk menggambar teks). Gambar eksternal dapat digunakan dalam format apa pun yang didukung oleh tokek (misalnya png, format GIF atau JPEG). Elemen kanvas lain pada halaman yang sama juga dapat digunakan sebagai sumber.

Salah satu fitur menarik dari kanvas adalah dapat memperkenalkan gambar, yang dapat digunakan untuk sintesis gambar atau produksi latar belakang, dll. Saat ini, hanya teks yang dapat ditambahkan ke gambar (deskripsi standar tidak termasuk fungsi teks gambar). Selama gambar yang didukung oleh Gecko (seperti PNG, GIF, JPEG, dll.) Dapat dimasukkan ke dalam kanvas, dan elemen kanvas lainnya juga dapat digunakan sebagai sumber gambar.

Mengimpor gambar

Mengimpor gambar pada dasarnya adalah proses dua langkah:

Memperkenalkan gambar hanya membutuhkan dua langkah sederhana:

Pertama, kita memerlukan referensi ke objek gambar JavaScript atau elemen kanvas lainnya sebagai sumber. Tidak mungkin menggunakan gambar hanya dengan menyediakan URL/jalur untuk mereka.
Kedua, kami menggambar gambar pada kanvas menggunakan fungsi drawImage.
Yang pertama tentu saja adalah gambar sumber, bukan jalur URL sederhana, tetapi bisa menjadi referensi objek gambar JavaScript atau elemen kanvas lainnya.
Kemudian gunakan metode DrawImage untuk memasukkan gambar ke dalam kanvas.

Mari kita lihat langkah pertama. Pada dasarnya ada empat opsi yang tersedia:

Mari kita lihat langkah pertama terlebih dahulu, pada dasarnya ada empat opsi:

Menggunakan gambar yang ada di halaman yang sama

Kami dapat mengakses semua gambar pada halaman dengan menggunakan koleksi Document.Images, metode Document.GetElementsByTagname, atau jika kami mengetahui atribut ID gambar, metode Document.GetElementById.

Kita bisa mendapatkan gambar di halaman (jika ID elemen gambar diketahui) melalui koleksi Document.Images, metode Document.GetElementsByTagname, atau metode Document.GetElementById.

Menggunakan elemen kanvas lainnya

Sama seperti dengan gambar normal kami mengakses elemen kanvas lain menggunakan metode document.getElementsByTagname atau metode document.getElementById. Pastikan Anda telah menggambar sesuatu ke kanvas sumber sebelum menggunakannya di kanvas target Anda.

Mirip dengan gambar di halaman referensi, gunakan metode Document.GetElementsByTagname atau Document.getElementById untuk mendapatkan elemen kanvas lainnya. Tapi yang harus Anda perkenalkan adalah kanvas siap.

Salah satu penggunaan yang lebih praktis dari ini adalah menggunakan elemen kanvas kedua sebagai pandangan mini dari kanvas yang lebih besar lainnya.

Aplikasi umum adalah membuat thumbnail untuk kanvas besar lainnya.

Membuat gambar dari awal

Opsi lain adalah membuat objek gambar baru dalam skrip kami. Kegagalan utama dari pendekatan ini adalah bahwa jika kita tidak ingin skrip kita berhenti di tengah karena perlu menunggu gambar dimuat, kita membutuhkan beberapa bentuk preloading gambar.

Selain itu, kita dapat menggunakan skrip untuk membuat objek gambar baru, tetapi kerugian utama dari metode ini adalah bahwa jika kita tidak ingin skrip berhenti karena kita menunggu perangkat gambar, kita masih perlu menerobos preload.

Pada dasarnya untuk membuat objek gambar baru, kami melakukan ini:

Kita dapat membuat gambar dengan cara sederhana berikut:

var img = gambar baru (); // createNeWimageObject
img.src = 'myimage.png'; // setSourcepath

 var img = gambar baru (); // Buat gambar baru objekImg.src = 'myimage.png'; // atur jalur sumber

Ketika skrip ini dieksekusi, gambar mulai memuat. Jika pemuatan belum selesai ketika pernyataan DrawImage dieksekusi, skrip berhenti sampai gambar selesai dimuat. Jika Anda tidak ingin ini terjadi, gunakan pawang acara Onload:

Saat skrip dieksekusi, gambar mulai memuat. Jika gambar tidak dimuat saat memanggil DrawImage, skrip akan menunggu sampai dimuat. Jika Anda tidak menginginkan ini, Anda dapat menggunakan acara Onload:

var img = gambar baru (); // createNeWimageObject
img.onload = function () {
// ExecutEdrawimagestathere
}
img.src = 'myimage.png'; // setSourcepath

 var img = gambar baru (); // Buat gambar baru objekImg.onload = function () {// jalankan pernyataan drawImage di sini} img.src = 'myimage.png'; // atur jalur sumber

Jika Anda hanya menggunakan satu gambar eksternal, ini bisa menjadi pendekatan yang baik tetapi begitu Anda perlu melacak lebih dari satu kita perlu menggunakan sesuatu yang lebih licik. Ini di luar ruang lingkup tutorial ini untuk melihat taktik preloading gambar tetapi Anda dapat memeriksa javascript gambar preloader untuk solusi lengkap.

Jika Anda hanya menggunakan satu gambar, itu sudah cukup. Tetapi diperlukan sekali lebih dari satu gambar, diperlukan metode pemrosesan yang lebih kompleks, tetapi strategi preloading gambar berada di luar cakupan tutorial ini. Jika Anda tertarik, Anda dapat merujuk ke Preloader Gambar JavaScript.

Menyematkan gambar melalui data: URL menanamkan gambar melalui data: URL

Cara lain yang mungkin untuk memasukkan gambar adalah melalui data: URL. URL data memungkinkan Anda untuk sepenuhnya mendefinisikan gambar sebagai string karakter yang dikodekan basis64 secara langsung dalam kode Anda. Salah satu keuntungan dari URL data adalah bahwa gambar yang dihasilkan tersedia segera tanpa perjalanan pulang pergi ke server. (Keuntungan lain adalah bahwa kemudian dimungkinkan untuk merangkum dalam satu file semua CSS, JavaScript, HTML, dan gambar Anda, membuatnya lebih portabel ke lokasi lain.) Beberapa kelemahan dari metode ini adalah bahwa gambar Anda tidak di -cache, dan untuk gambar yang lebih besar, URL yang dikodekan dapat menjadi cukup lama:

Kami juga dapat merujuk gambar melalui data: metode URL. URL data memungkinkan gambar untuk didefinisikan dalam string string yang dikodekan Base64. Keuntungannya adalah konten gambar tersedia segera tanpa harus berkeliling server lagi. ; Jika gambarnya besar, data URL tertanam akan cukup panjang:

var img_src = 'data: gambar/gif; base64, r0lgodlhcwalaiaaaaaaaaaaaaa3pn/zih5baeaaaaaAalaaaaaaaaaaaaaaaaiua = hkcuo4lmnvindo7qyrixberbaaaaha+hkcuo4lmnvindo7Qyrixbbia+hkcuO4lmnvindo7Qyrixberbaa

 var img_src = 'data: gambar/gif; base64, r0lgodlhcwalaiaaaaaaaaaaaa3pn/zih5baeaaaaAalaaaaaaaaaaaaaaaaaaiua = hkcuo4lmnvindo7qyrixby = hkcuo4lmnvindo7qyrixby = hkcuo4lmnvindo7qyrixby (hkcuo4lmnvindo7Qyrix;

DrawImage

Setelah kami memiliki referensi ke objek gambar sumber kami, kami dapat menggunakan metode DrawImage untuk membuatnya ke kanvas. Seperti yang kita lihat nanti, metode drawImage kelebihan beban dan memiliki tiga varian yang berbeda. Dalam bentuknya yang paling dasar terlihat seperti ini.

Setelah objek grafik sumber diperoleh, kita dapat membuatnya ke kanvas menggunakan metode drawImage. Ada tiga bentuk metode drawImage, dan berikut ini adalah yang paling mendasar.

DrawImage (gambar, x, y)

di mana gambar adalah referensi ke objek gambar atau kanvas kita. x dan y membentuk koordinat pada kanvas target di mana gambar kita harus ditempatkan.

di mana gambar adalah objek gambar atau kanvas, dan x dan y adalah koordinat awal mereka di kanvas target.

Contoh DrawImage 1

Dalam contoh berikut saya akan menggunakan gambar eksternal sebagai latar belakang grafik garis kecil. Menggunakan latar belakang dapat membuat skrip Anda jauh lebih kecil karena kami tidak perlu menggambar latar belakang yang rumit. Saya hanya menggunakan satu gambar di sini, jadi saya menggunakan pawang acara Object Object's Object untuk menjalankan pernyataan menggambar. Metode DrawImage menempatkan latar belakang pada koordinat (0,0) yang merupakan sudut kiri atas kanvas.

Dalam contoh berikut, saya menggunakan gambar eksternal sebagai latar belakang gambar linier. Kami tidak perlu menggambar latar belakang yang bertanggung jawab dengan gambar latar belakang, dan menyimpan banyak kode. Hanya satu objek gambar yang digunakan di sini, sehingga tindakan menggambar dipicu dalam fungsi respons peristiwa onload. Metode DrawImage menempatkan gambar latar belakang di sudut kiri atas (0,0) dari kanvas.

functionDraw () {

var ctx = document.geteLementById ('canvas'). getContext ('2d');
var img = gambar baru ();
img.onload = function () {
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 = 'gambar/latar belakang.png';
}

 function draw () {var ctx = document.geteLementById ('canvas'). getContext ('2d'); var img = gambar baru (); img.onload = function () {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 = 'Images/backdrop.png'; }

Penskalaan

Varian kedua dari metode DrawImage menambahkan dua parameter baru dan memungkinkan kita untuk menempatkan gambar berskala pada kanvas.

Varian lain dari metode DrawImage adalah penambahan dua parameter untuk mengontrol gambar ke skala dalam kanvas.

DrawImage (gambar, x, y, lebar, tinggi)

di mana lebar dan tinggi adalah ukuran gambar pada kanvas target.

Contoh DrawImage 2

Dalam contoh ini saya akan menggunakan gambar sebagai wallpaper dan mengulanginya beberapa kali di kanvas. Ini dilakukan hanya dengan melingkar dan menempatkan gambar berskala pada posisi yang berbeda. dalam kode di bawah loop pertama melalui baris kedua untuk loop kolom. Gambar ini diskalakan sepertiga dari ukuran aslinya yaitu 50x38 piksel. Kita akan melihat bagaimana ini juga bisa dicapai, dengan membuat pola khusus, nanti dalam tutorial ini.

Dalam contoh ini, saya akan menggunakan gambar untuk menyebar di kanvas dengan cara yang berulang seperti latar belakang. Ini juga sangat sederhana untuk diimplementasikan, cukup lilitkan melalui gambar yang diperbesar. Lihat kode di bawah ini. Lapisan pertama untuk loop adalah mengulangi baris, dan lapisan kedua adalah mengulang kolom. Ukuran gambar diskalakan ke sepertiga dari asli, 50x38 px. Metode ini dapat digunakan untuk mencapai efek pola latar belakang dengan baik, seperti yang akan Anda lihat di tutorial berikut.

Catatan : Gambar bisa menjadi buram saat meningkatkan atau kasar jika terlalu banyak diturunkan. Penskalaan mungkin paling baik tidak dilakukan jika Anda memiliki beberapa teks di dalamnya yang perlu tetap dapat dibaca.

Catatan: Gambar mungkin menjadi tidak jelas atau kabur karena penskalaan skala besar. Jika gambar Anda memiliki teks, sebaiknya tidak skala, karena setelah memprosesnya, sangat mungkin bahwa teks dalam gambar akan menjadi tidak dapat dikenali.

functionDraw () {

var ctx = document.geteLementById ('canvas'). getContext ('2d');
var img = gambar baru ();
img.onload = function () {
untuk (i = 0; i <4; i ++) {
untuk (j = 0; j <3; j ++) {
ctx.drawimage (img, j*50, i*38,50,38);
}
}
}
img.src = 'gambar/rhino.jpg';
}

 function draw () {var ctx = document.geteLementById ('canvas'). getContext ('2d'); var img = gambar baru (); img.onload = function () {for (i = 0; i <4; i ++) {for (j = 0; j <3; j ++) {ctx.drawimage (img, j*50, i*38,50,38); }}} img.src = 'gambar/rhino.jpg'; }

Mengiris

Varian ketiga dan terakhir dari metode DrawImage memiliki delapan parameter baru. Kita dapat menggunakan metode ini untuk mengiris bagian -bagian dari gambar sumber dan menariknya ke kanvas.

Varian ketiga dan terakhir dari metode DrawImage memiliki 8 parameter baru untuk mengontrol tampilan irisan.

DrawImage (Image, SX, SY, Swidth, Sheight, DX, Dy, Dwidth, Dheight)

Gambar parameter pertama, seperti halnya varian lainnya, adalah referensi ke objek gambar atau referensi ke elemen kanvas yang berbeda. Untuk delapan parameter lainnya, yang terbaik adalah melihat gambar di sebelah kanan. Empat parameter pertama menentukan lokasi dan ukuran irisan pada gambar sumber. Empat parameter terakhir menentukan posisi dan ukuran pada kanvas tujuan.

Parameter pertama sama dengan yang lain, keduanya adalah referensi ke satu gambar atau kanvas lain. 8 parameter lainnya paling baik dirujuk ke diagram di sebelah kanan. 4 pertama menentukan posisi irisan dan ukuran sumber gambar, dan 4 terakhir menentukan posisi tampilan target dan ukuran irisan.

Mengiris dapat 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 lengkap. Misalnya, jika Anda ingin membuat bagan, Anda dapat memiliki gambar PNG yang berisi semua teks yang diperlukan dalam satu file dan tergantung pada data Anda dapat mengubah skala bagan Anda tanpa banyak kesulitan. Keuntungan lain adalah Anda tidak perlu memuat setiap gambar secara individual.

Mengiris adalah alat yang ampuh untuk sintesis gambar. Misalkan ada gambar yang berisi semua elemen, maka Anda dapat menggunakan metode ini untuk mensintesis gambar yang lengkap. Misalnya, jika Anda ingin menggambar bagan dan memiliki file PNG dengan semua teks yang diperlukan di tangan Anda, Anda dapat dengan mudah mengubah bagan akhir yang ditampilkan sesuai dengan kebutuhan data yang sebenarnya. Manfaat lain dari metode ini adalah Anda tidak perlu memuat setiap gambar secara terpisah.

Contoh DrawImage 3

Dalam contoh ini saya akan menggunakan badak yang sama seperti yang telah kita lihat di atas, tetapi sekarang saya akan mengiris kepalanya dan menggabungkannya ke dalam bingkai foto. Gambar bingkai foto mencakup dropshadow yang telah disimpan sebagai gambar PNG 24-bit. Karena gambar PNG 24-bit menyertakan saluran alfa 8-bit penuh, tidak seperti GIF dan gambar PNG 8-bit, saya dapat menempatkannya di latar belakang apa pun dan tidak perlu khawatir tentang warna matte.

Dalam contoh ini, saya menggunakan gambar badak yang telah saya gunakan di atas, tetapi kali ini saya akan membuat irisan close-up kepala badak dan kemudian mensintesisnya ke dalam bingkai foto. Bingkai memiliki efek bayangan dan merupakan gambar yang disimpan dalam format PNG 24-bit. Karena gambar PNG 24-bit hadir dengan saluran alfa 8-bit penuh, tidak seperti GIF dan PNG 8-bit, saya dapat meletakkannya sebagai latar belakang tanpa khawatir tentang warna yang mendasarinya.

Saya mengambil pendekatan yang berbeda untuk pemuatan gambar dari contoh di atas. Saya baru saja menempatkan gambar secara langsung di dokumen HTML saya dan menggunakan aturan CSS untuk menyembunyikannya dari tampilan (Tampilan: Tidak Ada). Saya menetapkan kedua gambar atribut ID untuk membuatnya lebih mudah dipilih. Script itu sendiri sangat sederhana. Saya pertama -tama menggambar gambar yang diiris dan diskalakan pada kanvas (pernyataan penarikan pertama), dan kemudian menempatkan bingkai di atas (pernyataan drawImage kedua).

Saya memuat gambar dengan cara yang berbeda dari yang saya gunakan di atas, masukkan gambar langsung ke HTML, dan kemudian sembunyikan melalui CSS (tampilan: tidak ada). Saya menetapkan ID untuk kedua gambar, yang nyaman untuk digunakan nanti. Melihat skrip di bawah ini, ini cukup sederhana. Pertama, iris kepala badak (drawimage pertama) dan letakkan di atas kanvas, lalu letakkan bingkai foto di atasnya (drawimage kedua).

function draw () {
var canvas = document.geteLementById ('canvas');
var ctx = canvas.getContext ('2d');
// Drawslice
ctx.drawimage (document.geteLementById ('source'),
33.71.104.124,21,20,87,104);
// Drawframe
ctx.drawimage (document.geteLementById ('frame'), 0,0);
}

 function draw () {var canvas = document.geteLementById ('canvas'); var ctx = canvas.getContext ('2d'); // gambar slice ctx.drawimage (document.geteLementById ('source'), 33,71,104,124,21,20,87,104); // Gambar bingkai ctx.drawimage (document.geteLementById ('frame'), 0,0);}

Contoh Galeri Seni

Dalam contoh terakhir bab ini saya telah membuat galeri seni kecil. Galeri terdiri dari tabel yang berisi beberapa gambar. Ketika halaman dimuat, untuk setiap gambar di halaman elemen kanvas dimasukkan dan bingkai ditarik di sekitarnya.

Dalam kasus saya, semua gambar memiliki lebar dan tinggi tetap, dan begitu pula bingkai yang ditarik di sekitarnya. Anda dapat meningkatkan skrip sehingga menggunakan lebar dan tinggi gambar untuk membuat bingkai pas di sekitarnya.

Kode di bawah ini harus jelas. Kami mengulangi array gambar dan menambahkan elemen kanvas baru yang sesuai. Mungkin satu -satunya hal yang perlu diperhatikan, bagi mereka yang tidak begitu terbiasa dengan DOM, adalah penggunaan metode InsertBefore. InsertBefore adalah metode dari node induk (sel tabel) dari elemen (gambar) sebelum kami ingin memasukkan simpul baru kami (elemen kanvas).

function draw () {
// loopthroughallimages
untuk (i = 0; i <document.images.length; i ++) {
// Don'taddacanvasfortheframeimage
if (document.images [i] .getAttribute ('id')! = 'frame') {
// createCanVasElement
canvas = document.createElement ('Canvas');
canvas.setAttribute ('width', 132);
Canvas.setAttribute ('Height', 150);
// INSERTBEFORETEIMAGE
document.images [i] .parentnode.insertbefore (Canvas, document.images [i]);
ctx = canvas.getContext ('2d');
// drawimagetocanvas
ctx.drawimage (document.images [i], 15,20);
// addframe
ctx.drawimage (document.geteLementById ('frame'), 0,0);
}
}
}