Pembelajaran kanvas dan kode implementasi filter

Di era menjamurnya produk digital ini, memotret sudah menjadi bagian tak terpisahkan dari kehidupan. Baik saat Anda di rumah, jalan-jalan, atau bepergian jauh, Anda akan selalu mengambil beberapa foto yang indah. Namun foto yang diambil langsung dengan kamera seringkali memiliki kesenjangan tertentu dengan ekspektasi psikologis kita. Jawabannya adalah gambar P yang cantik, sehingga semua jenis kamera kecantikan bermunculan, dan gambar P telah menjadi keterampilan portabel.

Faktanya, apa yang disebut keindahan tidak lebih dari gabungan penggunaan banyak filter, dan filter menggunakan algoritma tertentu untuk memanipulasi piksel gambar untuk mendapatkan beberapa efek gambar khusus. Teman-teman yang pernah menggunakan Photoshop pasti tahu banyak sekali filter di PS. Di bawah ini kita akan menggunakan teknologi js canvas untuk mendapatkan beberapa efek filter.

Baru-baru ini saya mempelajari hal penting dari HTML5 - canvas . Dengan menggunakan kanvas, personel front-end dapat dengan mudah melakukan pemrosesan gambar. Ada banyak API. Kali ini saya terutama akan mempelajari API yang umum digunakan dan menyelesaikan dua kode berikut:

• Menerapkan filter dekolorisasi
• Terapkan filter warna negatif (warna terbalik).

Elemen HTML ini dirancang untuk grafik vektor sisi klien. Ia tidak memiliki perilakunya sendiri, namun menampilkan API gambar ke JavaScript klien sehingga skrip dapat menggambar apa pun yang diinginkannya ke kanvas.

Perbedaan penting antara tag <canvas> dan SVG dan VML adalah <canvas> memiliki API gambar berbasis JavaScript, sedangkan SVG dan VML menggunakan dokumen XML untuk mendeskripsikan gambar.

Sebagian besar API gambar Canvas tidak ditentukan pada elemen <canvas> itu sendiri, namun ditentukan pada objek lingkungan gambar yang diperoleh melalui metode getContext() kanvas. Lebar dan tinggi default elemen <canvas> sendiri adalah 300px dan 150px.

 // Memproses elemen kanvas var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // Mendapatkan objek konteks pada tag kanvas yang ditentukan var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // Warna ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Mulai koordinat ctx.lineTo(200, 100); .stroke(); // Segera menggambar

Untuk antarmuka ctx.arc() , lima parameternya adalah: (x,y,r,start,stop) . Diantaranya, x dan y adalah koordinat pusat lingkaran, dan r adalah jari-jarinya.

Satuan start dan stop adalah radian . Bukan panjangnya, bukan derajatnya.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. stroke();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Halo Dunia, 10, 50);

Mengenai API pemrosesan gambar, ada empat hal utama:

Menggambar gambar: drawImage(img,x,y,width,height) atau drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Dapatkan data gambar: getImageData(x,y,width,height)

Tulis ulang data gambar: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Ekspor gambar: toDataURL([type, encoderOptions])

Untuk deskripsi API dan parameter yang lebih detail, silakan lihat: Penjelasan Parameter API Pemrosesan Gambar Kanvas

Berdasarkan API ini, kita dapat menggambar di elemen canvas . Misalkan gambar kita adalah ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Deklarasikan objek Gambar baru img.src = ./img/photo.jpg // Setelah gambar dimuat img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // Sesuai dengan ukuran gambar, tentukan ukuran kanvas canvas.width = img.width canvas.height = img.height // Menggambar gambar ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

Seperti yang ditunjukkan pada gambar di bawah, gambar digambar ke dalam kanvas:

Di sini kami terutama meminjam fungsi getImageData , yang mengembalikan nilai RGBA setiap piksel. Dengan bantuan rumus pemrosesan gambar, Anda dapat memanipulasi piksel untuk melakukan operasi matematika yang sesuai.

Efek penghilangan warna setara dengan foto hitam putih yang diambil dengan kamera lama. Berdasarkan kepekaan mata manusia, manusia memberikan rumus sebagai berikut:

gray = red * 0.3 + green * 0.59 + blue * 0.11

Kodenya adalah sebagai berikut:

 <skrip> window.onload = function () { var img = Gambar baru() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = kanvas.getContext(2d); kanvas.lebar = img.lebar kanvas.tinggi = img.tinggi ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Mulai pemrosesan filter var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height untuk (var i = 0; i < imgData.data . panjang / 4; ++i) { var merah = imgData.data[i * 4], hijau = imgData.data[i * 4 + 1], biru = imgData.data[i * 4 + 2]; var grey = 0,3 * merah + 0,59 * hijau + 0,11 * biru; // Hitung abu-abu // Segarkan RGB, catatan: // imgData.data[i * 4 + 3] adalah disimpan adalah alpha, tidak perlu diubah imgData.data[i * 4] = grey; imgData.data[i * 4 + 1] = grey; 4 + 2] = abu-abu; } ctx.putImageData(imgData, 0, 0); // Tulis ulang data gambar} }</script>

Efeknya seperti yang ditunjukkan di bawah ini:

4.2 Efek warna negatif

Efek warna negatif adalah mengurangi nilai saat ini dari nilai maksimum. Nilai numerik maksimum teoretis dalam RGB yang diperoleh getImageData adalah: 255. Jadi rumusnya adalah sebagai berikut:

new_val = 255 - val

Kodenya adalah sebagai berikut:

 <skrip> window.onload = function () { var img = Gambar baru() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = kanvas.getContext(2d); kanvas.lebar = img.lebar kanvas.tinggi = img.tinggi ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Mulai pemrosesan filter var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height untuk (var i = 0; i < imgData.data . panjang / 4; ++i) { var merah = imgData.data[i * 4], hijau = imgData.data[i * 4 + 1], biru = imgData.data[i * 4 + 2]; // Segarkan RGB, catatan: // imgData.data[i * 4 + 3] menyimpan alfa, tidak perlu mengubah imgData.data[i * 4] = 255 - imgData . data[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0);

Rendernya adalah sebagai berikut:

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.