Kanvas benar-benar merupakan hal yang ajaib. Kanvas tidak hanya dapat menggambar berbagai grafik, teks, dan bitmap, tetapi juga melakukan operasi piksel yang kompleks dan pemrosesan pada bitmap. Oleh karena itu, hal-hal seperti filter sebenarnya dapat diimplementasikan menggunakan Canvas. Selanjutnya, saatnya menyaksikan keajaiban.
Pertama, kita perlu memiliki container Canvas, misalnya:
<kanvas id=kanvas saya lebar=800 tinggi=800></kanvas>
Selanjutnya, kita perlu menggunakan Canvas untuk menggambar:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Siapkan tautan gambar Anda sendiri img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//800 pertama mewakili lebar gambar yang digambar, dan 800 kedua mewakili tinggi gambar yang digambar}Efek gambar pertama Canvas
Langkah selanjutnya adalah melakukan beberapa operasi pada piksel gambar. Untuk mengimplementasikan operasi seperti itu, pertama-tama Anda perlu mendapatkan informasi piksel gambar dari Canvas, dan informasi ini dapat diperoleh melalui getImageData() .
// ... Hilangkan kode sebelumnya img.onload = (e) => {// ... Hilangkan kode sebelumnya img = ctx.getImageData(0, 0, 800, 800); data byte piksel}Karena ukuran gambar adalah 800*800, maka piksel perlu dilintasi untuk mendapatkan nilai merah, hijau, dan biru dari setiap piksel. Karena itu:
// ... Hilangkan kode sebelumnya img.onload = (e) => {// ... Hilangkan kode sebelumnya var pixelLen = 800 * 800; // Dapatkan jumlah piksel untuk(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // Satuan byte pertama melambangkan merah hijauC = img.data[i + 1], // Satuan byte kedua melambangkan hijau biruC = img.data[i + 2], // Satuan byte ketiga melambangkan alpha biru = img.data[i + 3]; // Satuan byte keempat melambangkan transparansi}}Melalui loop di atas, kita memperoleh nilai warna spesifik dari setiap piksel yang terdapat dalam data gambar. Satu hal yang perlu diperhatikan adalah bahwa data setiap piksel bukanlah satu bit, melainkan empat bit yang berdekatan, yang masing-masing mewakili warna merah, hijau, dan merah. biru, dan nilai transparansi intinya. Oleh karena itu, pada kenyataannya, panjang array data byte bitmap sama dengan jumlah piksel dikalikan 4. Dalam perulangan for, kami juga menangani fitur ini dengan tepat.
Dengan merata-ratakan nilai merah, hijau, dan biru dari setiap titik, lalu menetapkan nilai rata-rata yang dihasilkan ke nilai merah, hijau, dan biru pada piksel, efek skala abu putImageData() abu dapat dibentuk. putImageData() metode yang digunakan untuk menggambar ulang saja gambarnya, kodenya sebagai berikut:
// ... Hilangkan kode sebelumnya img.onload = (e) => { // ... Hilangkan kode sebelumnya for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Hilangkan kode sebelumnya var grey = parseInt((redC + greenC + blueC) / 3); // Dapatkan nilai abu-abu setelah rata-rata img.data[i] = grey; + 1] = abu-abu; // Ubah nilai hijau img.data[i + 2] = abu-abu; // Ubah nilai biru} ctx.putImageData(img, 0, 0, 800, 800);Pada saat ini akan terbentuk efek skala abu-abu, seperti gambar di bawah ini
Kanvas menggambar untuk kedua kalinya - efek skala abu-abu
Untuk mengontrol transparansi, Anda hanya perlu mengubah nilai yang sesuai dengan unit byte keempat. Rentang nilainya adalah 0~256, 0 mewakili transparansi penuh, dan 256 mewakili opacity lengkap. Misalnya:
// ... Hilangkan kode sebelumnya img.onload = (e) => { // ... Hilangkan kode sebelumnya for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Hilangkan kode sebelumnya img.data[i + 3] = 128; // Transparansi 50% } // ... Hilangkan kode sebelumnya }Kanvas gambar ketiga meningkatkan efek transparansi
Dari sini, dengan mengontrol nilai 4 data untuk setiap piksel dalam gambar, efek filter dapat dicapai dengan mudah!
Referensi:
"Pengetahuan Dasar HTML5, Teknologi Inti, dan Kasus Mutakhir" diedit oleh Liu Huan
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.