Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Menciptakan Image Editor menggunakan Iweb2shot: membuat penyaring kustom dan campuran mode

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating an Image Editor Using CamanJS.
Creating an Image Editor Using CamanJS: Applying Basic Filters

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Dalam tutorial pertama seri editor gambar Iweb2shot kami, kami hanya menggunakan built-in filter untuk mengedit gambar. Ini terbatas kami beberapa efek dasar seperti kecerahan, kontras, dan 18 filter lain yang lebih rumit dengan nama seperti Vintage, matahari terbit, dll. Mereka semua mudah untuk menerapkan, tapi kami tidak berada dalam kendali penuh dari setiap pixel dari gambar kita ingin mengedit.

Dalam tutorial kedua, kita belajar tentang lapisan dan campuran mode, yang memberi kita lebih banyak kontrol atas gambar kami telah mengedit. Misalnya, Anda dapat menambahkan lapisan baru pada kanvas, mengisinya dengan warna atau gambar, dan kemudian meletakkannya atas lapisan orangtua dengan mode campuran yang diterapkan ke. Namun, kami masih tidak menciptakan filter kita sendiri, dan mode kombinasi yang kita dapat menerapkan dibatasi hanya untuk orang-orang yang sudah disediakan oleh Iweb2shot.

Tujuan dari tutorial ini akan mengajarkan Anda cara membuat Anda sendiri modus Blender dan filter. Kami juga akan membahas beberapa bug yang hadir dalam perpustakaan dan bagaimana Anda dapat menambal mereka dengan menggunakan Iweb2shot dalam proyek Anda sendiri.

Menciptakan campuran mode baru

Secara default, Iweb2shot menawarkan sepuluh blend mode. Ini normal, mengalikan, layar, overlay, perbedaan, penambahan, pengecualian, softLight, meringankan, dan menggelapkan. Perpustakaan juga memungkinkan Anda untuk mendaftar mode kombinasi Anda sendiri. Dengan cara ini, Anda dapat mengontrol bagaimana pixel sesuai dari arus lapisan dan lapisan orangtua campuran bersama-sama untuk menghasilkan hasil akhir.

You can create a new blend mode using Caman.Blender.register("blend_mode", callback);. Here, blend_mode is the name that you want to use in order to identify the blend mode you are creating. Fungsi panggilan balik menerima dua parameter yang berisi nilai-nilai RGB untuk berbeda piksel pada lapisan ini dan sesuai piksel pada layer orangtua. Fungsi kembali sebuah objek dengan nilai-nilai akhir untuk rgb saluran.

Berikut adalah contoh dari mode kustom campuran yang menetapkan nilai individu saluran piksel hingga 255 jika nilai yang saluran untuk pixel sesuai dalam lapisan orangtua adalah lebih dari 128. Jika nilai di bawah 128, nilai akhir saluran adalah hasil dari mengurangi nilai saluran lapisan saat ini dari nilai saluran orangtua. Nama mode campuran ini adalah maxrgb.

Mari kita membuat modus campuran lain dengan cara yang sama. Saat ini, nilai-nilai akhir saluran akan ditetapkan ke 0 jika nilai saluran untuk pixel sesuai dalam lapisan orangtua lebih besar dari 128. Jika nilai saluran untuk lapisan orangtua adalah kurang dari 128, hasil akhir akan penambahan nilai saluran saat ini lapisan dan lapisan orangtua pixel tertentu. Mode campuran ini telah bernama minrgb.

Anda harus mencoba dan menciptakan mode kombinasi Anda sendiri untuk latihan.

Membuat penyaring baru berbasis Pixel

Ada dua kategori luas dari filter di Iweb2shot. Anda juga dapat beroperasi pada seluruh gambar satu pixel pada waktu atau Anda dapat mengubah gambar menggunakan lilitan kernel. Kernel lilitan adalah sebuah matriks yang menentukan warna piksel tertentu berdasarkan pixel di sekitarnya. Dalam bagian ini, kita akan fokus pada pixel berbasis filter. Kernel manipulasi akan dibahas pada bagian berikutnya.

Pixel berbasis filter diberi nilai RGB saluran untuk satu pixel pada waktu. Nilai-nilai RGB akhir untuk pixel tertentu yang tidak terpengaruh oleh pixel sekitarnya. Anda dapat membuat filter Anda sendiri menggunakan Caman.Filter.register ("filter_name", callback);. Filter yang Anda buat harus memanggil metode proses. Metode ini menerima nama filter dan fungsi panggilan balik sebagai parameter.

Kode snippet berikut menunjukkan Anda bagaimana untuk membuat berbasis pixel filter yang ternyata greyscale gambar. Hal ini dilakukan oleh menghitung pendaran setiap pixel dan kemudian menetapkan nilai individu saluran untuk menjadi sama dengan pendaran dihitung.

Anda dapat membuat filter ambang dengan cara yang sama. Saat ini, kita akan memungkinkan pengguna untuk melewati nilai batas. Jika Luminositas dari sebuah pixel tertentu di atas batas pengguna yang disediakan, pixel yang akan berubah putih. Jika Luminositas dari sebuah pixel tertentu kurang dari batas pengguna yang disediakan, pixel yang akan berubah menjadi hitam.

Sebagai latihan, Anda harus mencoba dan membuat Anda sendiri berbasis pixel filter yang, misalnya, meningkatkan nilai untuk saluran tertentu pada semua piksel.

Instead of manipulating the color of the current pixel, CamanJS also allows you to set the color for pixels at absolute and relative locations. Unfortunately, this behavior is a little buggy, so we will have to rewrite some methods. If you look at the source code of the library, you will notice that methods like getPixel() and putPixel() call the methods coordinatesToLocation() and locationToCoordinates() on this. However, these methods are not defined on the prototype but on the class itself.

Masalah lain dengan Perpustakaan adalah bahwa metode putPixelRelative() menggunakan nama variabel nowLoc daripada newLoc di dua tempat yang berbeda. Anda dapat menyingkirkan kedua isu-isu ini dengan menambahkan kode berikut dalam skrip Anda.

After correcting the code, you should now be able to create a filter that relies on putPixelRelative() without any issues. Here is one such filter that I created.

This filter randomly sets the value of pixels two rows up and two columns to the right of the current pixel to white. This erases parts of the image. Hence the name of the filter.

Menciptakan baru Kernel manipulasi berbasis filter

Seperti yang saya sebutkan sebelumnya, Iweb2shot memungkinkan Anda untuk membuat penyaring kustom dimana warna pixel saat ini ditentukan oleh piksel yang mengelilinginya. Pada dasarnya, filter ini pergi ke setiap pixel gambar yang Anda mengedit. Sebuah pixel dalam gambar akan dikelilingi oleh delapan piksel lainnya. Nilai-nilai piksel ini sembilan dari gambar yang dikalikan dengan entri sesuai lilitan matriks. All these products are then added together to get the final color value for the pixel. You can read about the process in more detail in the GIMP documentation.

Just like pixel-based filters, you can define your own kernel manipulation filters using Caman.Filter.register("filter_name", callback);. The only difference is that you will now call processKernel() inside the callback function.

Berikut adalah contoh membuat penyaring emboss menggunakan kernel manipulasi.

Demo CodePen berikut akan menunjukkan semua filter bahwa kita diciptakan dalam tutorial ini dalam tindakan.

Akhir pikiran

Dalam seri ini, saya telah menutupi hampir segala sesuatu yang ditawarkan dalam hal editing gambar berbasis kanvas Iweb2shot. Sekarang Anda dapat menggunakan semua filter built-in, membuat lapisan-lapisan baru, menerapkan campuran mode pada lapisan tersebut, dan menentukan mode campuran Anda sendiri dan menyaring fungsi.

Anda juga dapat pergi melalui panduan situs web Iweb2shot untuk membaca tentang apa pun bahwa aku mungkin telah kehilangan. Saya juga merekomendasikan bahwa Anda membaca kode sumber perpustakaan untuk mempelajari lebih lanjut tentang manipulasi gambar. Ini juga akan membantu Anda menemukan bug lain di Perpustakaan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.