Menciptakan Image Editor Menggunakan CamanJS: lapisan, campuran mode, dan acara

() translation by (you can also view the original English article)

Dalam tutorial sebelumnya, Anda belajar bagaimana untuk membuat gambar editor menggunakan CamanJS yang dapat menerapkan dasar filter seperti kontras, kecerahan dan suara ke gambar. Iweb2shot juga memiliki beberapa filter lain built-in seperti Nostalgia, lubang jarum, matahari terbit, dll, yang kita diterapkan secara langsung ke gambar.

Dalam tutorial ini, kita akan membahas beberapa fitur yang lebih maju dari perpustakaan seperti lapisan, mode campuran, dan acara.

Lapisan dalam CamanJS

Dalam tutorial pertama, kami hanya bekerja dengan lapisan tunggal yang berisi gambar. Semua filter yang kami terapkan hanya dimanipulasi lapisan yang utama. CamanJS memungkinkan Anda untuk membuat beberapa lapisan untuk memungkinkan Anda untuk mengedit gambar Anda dalam cara yang lebih canggih. Anda dapat membuat lapisan bersarang, tetapi mereka akan selalu diterapkan pada lapisan orangtua mereka seperti tumpukan.

Setiap kali Anda membuat layer baru dan menerapkannya pada lapisan orangtua, modus campuran default digunakan akan menjadi normal. Anda dapat membuat layer baru pada kanvas yang menggunakan metode newLayer(). Bila Anda membuat layer baru, Anda juga dapat melewati fungsi callback yang akan berguna jika Anda berniat untuk memanipulasi lapisan.

Fungsi ini dapat digunakan untuk banyak tugas-tugas seperti pengaturan modus campuran untuk lapisan baru menggunakan metode setBlendingMode(). Demikian pula, Anda dapat mengontrol opacity dari lapisan baru menggunakan metode opacity().

Setiap lapisan baru yang Anda buat dapat diisi dengan warna padat menggunakan metode fillColor(). Anda juga dapat menyalin isi dari lapisan orangtua untuk lapisan baru menggunakan metode copyParent(). Semua filter yang kita pelajari tentang dalam tutorial sebelumnya juga dapat diterapkan pada lapisan baru yang kita ciptakan. Misalnya, Anda dapat meningkatkan kecerahan layer baru dibuat dengan menggunakan this.filter.brightness(10).

Menyalin orangtua atau mengisi lapisan dengan warna solid, Anda juga memiliki pilihan untuk memuat gambar lain dalam lapisan dan tampilan pada orang tua. Seperti gambar utama, Anda akan dapat menerapkan penyaring yang berbeda untuk gambar disalut juga.

Dalam potongan kode berikut, kami telah terpasang klik event handler untuk tiga tombol yang akan memenuhi lapisan baru dengan warna solid, lapisan orangtua dan gambar tampilan masing-masing.

$('#orange-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.fillColor('#ff9900');
        });
        this.render();
    });
});

$('#parent-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.copyParent();
            this.filter.brightness(20);
        });
        this.render();
    });
});

$('#overlay-btn').on('click', function (e) {
    var oImg = new Image();
    oImg.src = "trees.png";
    
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.overlayImage(oImg);
            this.filter.brightness(20);
        });
        this.render();
    });
});

Blend mode di CamanJS

Di bagian sebelumnya, kami terus opacity dari setiap lapisan baru yang kami tambahkan ke kanvas di bawah 100. Ini dilakukan karena lapisan baru jika tidak akan menyembunyikan lapisan lama sepenuhnya. Bila Anda menempatkan satu lapisan atas yang lain, CamanJS memungkinkan Anda untuk menentukan modus campuran yang menentukan hasil akhir setelah penempatan. Modus campuran diatur normal secara default.

Ini berarti bahwa setiap lapisan baru yang Anda tambahkan di kanvas akan membuat lapisan di bawah ini tidak terlihat. Perpustakaan memiliki sepuluh campuran mode total. Ini normal, multiply, layar, tampilan, perbedaan, penambahan, pengecualian, softLight, pengecualian, dan menggelapkan.

Seperti yang saya sebutkan sebelumnya, normal campuran set modus warna akhir setara dengan warna lapisan baru. Modus campuran multiply menentukan warna akhir sebuah pixel dengan mengalikan saluran individu bersama-sama dan kemudian membagi hasilnya dengan 255. Perbedaan dan penambahan campuran mode bekerja dengan cara yang sama, tetapi mereka mengurangi dan menambahkan saluran.

Menggelapkan campuran set modus warna akhir sebuah pixel ke sama dengan nilai terendah saluran warna individu. Lighten campuran set modus warna akhir sebuah pixel ke sama dengan nilai tertinggi saluran warna individu. Modus campuran pengecualian ini agak mirip dengan perbedaan, tapi ia mengatur kontras ke nilai yang lebih rendah. Dalam kasus modus campuran layar, warna akhir diperoleh dengan membalik warna setiap lapisan, mengalikan mereka, dan kemudian lagi membalik hasilnya.

Hamparan campuran mode seperti kalikan jika bawah warna lebih gelap, dan ia bertindak seperti layar jika bawah berwarna lebih ringan.

Jika Anda ingin warna dalam lapisan yang berbeda untuk berinteraksi dalam cara yang berbeda, CamanJS juga memungkinkan Anda menentukan mode kombinasi Anda sendiri. Kami akan mencakup hal ini dalam tutorial selanjutnya dari seri.

Berikut adalah kode JavaScript untuk menerapkan mode kombinasi yang berbeda pada gambar:

$('#multiply-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('multiply');
        });
        this.render();
    });
});

$('#screen-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('screen');
        });
        this.render();
    });
});

Dalam potongan kode di atas, kita mendapatkan nilai warna Hex dari sebuah field input. Warna ini kemudian diterapkan pada lapisan baru. Anda dapat menulis kode untuk menerapkan modus campuran lainnya dengan cara yang sama.

Cobalah untuk menentukan warna pilihan Anda dalam input field, dan kemudian menerapkan salah satu mode kombinasi dengan mengklik pada tombol masing-masing. Saya telah menerapkan campuran mode pada warna padat dalam contoh, tetapi Anda juga dapat menerapkannya pada gambar disalut dari bagian sebelumnya.

Acara di CamanJS

Jika Anda upload gambar besar dalam demo tutorial pertama atau kedua tutorial, Anda mungkin telah memperhatikan bahwa hasil dari setiap filter diterapkan atau modus campuran menjadi jelas setelah waktu yang lama.

Gambar besar memiliki banyak piksel, dan menghitung nilai akhir saluran yang berbeda untuk setiap pixel setelah menerapkan modus campuran khusus yang bisa sangat memakan waktu. Sebagai contoh, ketika menerapkan multiply campuran mode pada gambar dengan dimensi 1920 * 1080, perangkat harus melakukan perkalian dan divisi lebih dari 6 juta kali.

Dalam kasus tersebut, Anda dapat menggunakan acara untuk memberikan pengguna beberapa indikasi tentang kemajuan filter atau campuran mode. Iweb2shot memiliki lima peristiwa yang berbeda yang dapat digunakan untuk melaksanakan fungsi-fungsi panggilan balik tertentu pada tahap yang berbeda. Acara ini lima adalah processStart, processComplete, renderFinished, blockStarted, dan blockFinished.

ProcessStart dan processComplete peristiwa dipicu setelah satu filter dimulai atau selesai proses render. Ketika semua filter yang Anda tetapkan telah diterapkan pada gambar, Perpustakaan kebakaran renderFinished acara.

Iweb2shot membagi besar gambar ke dalam blok sebelum memulai untuk memanipulasi mereka. BlockStarted dan blockFinished peristiwa dipecat setelah blok-blok individu gambar telah diproses oleh Perpustakaan.

Dalam contoh kita, kita akan hanya menggunakan processStart dan renderFinished peristiwa untuk memberitahukan pengguna tentang kemajuan kami operasi editing gambar.

Caman.Event.listen("processStart", function (process) {
    $(".process-message").text('Applying ' + process.name);
});
Caman.Event.listen("renderFinished", function () {
    $(".process-message").text("Done!");
});

Dengan peristiwa processStart dan processFinish, Anda mendapatkan akses ke nama proses saat ini beroperasi pada gambar. Peristiwa blockStarted dan blockFinished, di sisi lain, memberikan Anda akses ke informasi seperti jumlah blok, blok saat ini sedang diproses, dan jumlah blok selesai.

Cobalah mengklik tombol apapun dalam demo di bawah ini, dan Anda akan melihat nama proses saat ini memanipulasi gambar pada bagian bawah kanvas.

Akhir Pikiran

Tutorial pertama dari seri menunjukkan Anda bagaimana untuk membuat sebuah editor gambar dasar dengan built-in filter dari perpustakaan Iweb2shot. Tutorial ini menunjukkan Anda bagaimana untuk bekerja dengan lebih dari satu lapisan dan menerapkan penyaring yang berbeda dan campuran mode untuk setiap lapisan individual.

Karena proses editing gambar dapat mengambil beberapa saat untuk gambar besar, kita juga belajar bagaimana untuk menunjukkan kepada pengguna bahwa editor gambar yang benar-benar pengolahan gambar dan tidak duduk siaga.

Dalam tutorial berikutnya dan akhir dari seri, Anda akan mempelajari cara membuat Anda sendiri modus Blender dan filter di Iweb2shot. Jika Anda memiliki pertanyaan yang berkaitan dengan tutorial ini, jangan ragu untuk membiarkan saya tahu di komentar.