Bangunkan alat penyuntingan imej dengan CamanJS: Teroka lapisan, mod pengadunan dan pengendalian acara

Dalam tutorial sebelumnya, anda mempelajari cara menggunakan CamanJS untuk mencipta editor imej yang boleh menggunakan penapis asas seperti kontras, kecerahan dan hingar pada imej. CamanJS juga mempunyai beberapa penapis terbina dalam lain seperti nostalgia, lubang jarum, matahari terbit, dsb. yang kami gunakan terus pada imej.

Dalam tutorial ini, kami akan merangkumi beberapa ciri perpustakaan yang lebih maju, seperti lapisan, mod gabungan dan acara.

Lapisan dalam CamanJS

Dalam tutorial pertama ini kami hanya menggunakan satu lapisan yang mengandungi imej. Semua penapis yang kami gunakan hanya memanipulasi lapisan utama ini. CamanJS membolehkan anda mencipta berbilang lapisan supaya anda boleh mengedit imej dengan cara yang lebih kompleks. Anda boleh membuat lapisan bersarang, tetapi ia akan sentiasa digunakan pada lapisan induknya seperti timbunan.

Setiap kali anda mencipta lapisan baharu dan menggunakannya pada lapisan induk, mod pengadun lalai yang digunakan ialah normal. Anda boleh mencipta lapisan baharu pada kanvas menggunakan kaedah newLayer(). Apabila anda mencipta lapisan baharu, anda juga boleh menghantar fungsi panggil balik, yang boleh berguna jika anda bercadang untuk memanipulasi lapisan. normal。您可以使用 newLayer() 方法在画布上创建一个新图层。当您创建新图层时，您还可以传递一个回调函数，如果您打算操作图层，该函数将很有用。

此函数可用于许多任务，例如使用 setBlendingMode() 方法设置新图层的混合模式。同样，您可以使用 opacity() 方法控制新图层的不透明度。

您创建的任何新图层都可以使用 fillColor() 方法填充纯色。您还可以使用 copyParent() 方法将父层的内容复制到新层。我们在上一个教程中学到的所有过滤器也可以应用于我们正在创建的新图层。例如，您可以使用 this.filter.brightness(10) 增加新创建图层的亮度。

您还可以选择加载图层中的任何其他图像并将其覆盖在父级上，而不是复制父级或使用纯色填充图层。就像主图像一样，您也可以对叠加图像应用不同的滤镜。

在下面的代码片段中，我们将一个单击事件处理程序附加到三个按钮，这三个按钮将分别用纯色、父图层和覆盖图像填充新图层。

$('#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();
    });
});

CamanJS 中的混​​合模式

在上一节中，我们将添加到画布的任何新图层的不透明度保持在 100 以下。这样做是因为新图层将完全隐藏旧图层。当您将一层放置在另一层上时，CamanJS 允许您指定混合模式，该模式决定放置后的最终结果。混合模式默认设置为 normal 。

这意味着您在画布上添加的任何新图层都会使其下面的图层不可见。该库共有十种混合模式。这些是 正常、乘法、屏幕、覆盖、差异、添加、排除、softLight、排除 和暗化。

正如我之前提到的，normal 混合模式将最终颜色设置为等于新图层的颜色。 multiply 混合模式通过将各个通道相乘，然后将结果除以 255 来确定像素的最终颜色。 multiply 和 addition 的区别混合模式的工作方式类似，但它们会减去和添加通道。

darken 混合模式将像素的最终颜色设置为等于各个颜色通道的最低值。 lighten 混合模式将像素的最终颜色设置为等于各个颜色通道的最高值。 exclusion 混合模式与 difference 有点相似，但它将对比度设置为较低的值。在 screen 混合模式的情况下，最终颜色是通过反转每层的颜色、相乘，然后再次反转结果来获得的。

如果底部颜色较深，则 overlay 混合模式的作用类似于 multiply；如果底部颜色较浅，则其作用类似于 screen

Fungsi ini boleh digunakan untuk banyak tugas, seperti menetapkan mod pengadunan lapisan baharu menggunakan kaedah setBlendingMode(). Begitu juga, anda boleh mengawal kelegapan lapisan baharu menggunakan kaedah opacity().

Sebarang lapisan baharu yang anda buat boleh diisi dengan warna pepejal menggunakan kaedah fillColor(). Anda juga boleh menggunakan kaedah copyParent() untuk menyalin kandungan lapisan induk ke lapisan baharu. Semua penapis yang kami pelajari dalam tutorial sebelumnya juga boleh digunakan pada lapisan baharu yang kami cipta. Contohnya, anda boleh menggunakan this.filter.brightness(10) untuk meningkatkan kecerahan lapisan yang baru dibuat.

Anda juga boleh memilih untuk memuatkan mana-mana imej lain dalam lapisan dan menindihnya pada induk, bukannya menyalin induk atau mengisi lapisan dengan warna pepejal. Sama seperti imej utama, anda juga boleh menggunakan penapis yang berbeza pada imej tindanan. 🎜 🎜Dalam coretan kod di bawah, kami melampirkan pengendali acara klik pada tiga butang yang masing-masing akan mengisi lapisan baharu dengan warna pepejal, lapisan induk dan imej tindanan. 🎜

$('#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();
    });
});

🎜Mod Campuran dalam CamanJS🎜 🎜Dalam bahagian sebelumnya, kami mengekalkan kelegapan di bawah 100 untuk sebarang lapisan baharu yang kami tambahkan pada kanvas. Ini dilakukan kerana lapisan baru akan menyembunyikan sepenuhnya lapisan lama. Apabila anda meletakkan satu lapisan di atas lapisan yang lain, CamanJS membenarkan anda untuk menentukan mod campuran yang menentukan hasil akhir selepas peletakan. Mod pengadunan ditetapkan kepada normal secara lalai. 🎜 🎜Ini bermakna mana-mana lapisan baharu yang anda tambahkan pada kanvas akan menjadikan lapisan di bawahnya tidak kelihatan. Terdapat sepuluh mod pengadunan dalam perpustakaan ini. Ini ialah Normal, Pendaraban, Skrin, Timpa, Perbezaan, Tambah, Exclude, softLight, Exclude dan Gelapkan. 🎜 🎜Seperti yang saya nyatakan sebelum ini, mod campuran normal menetapkan warna akhir sama dengan warna lapisan baharu. Mod pengadun darab menentukan warna akhir piksel dengan mendarab saluran individu dan membahagikan hasilnya dengan 255. Perbezaan antara mod darab dan tambahan berfungsi sama, tetapi ia menolak dan menambah saluran. 🎜 🎜gelapkan mod pengadunan menetapkan warna akhir piksel bersamaan dengan nilai terendah bagi setiap saluran warna. Mod pengadun cerah menetapkan warna akhir piksel yang sama dengan nilai tertinggi setiap saluran warna. Mod pengadunan exclusion agak serupa dengan perbezaan, tetapi ia menetapkan kontras kepada nilai yang lebih rendah. Dalam kes mod campuran screen, warna akhir diperoleh dengan menyongsangkan warna setiap lapisan, mendarab dan kemudian menyongsangkan hasilnya semula. 🎜 🎜Jika warna bawah lebih gelap, mod pengadun tindihan berfungsi seperti darab jika warna bawah lebih cerah, Sama seperti skrin. 🎜 🎜CamanJS juga membolehkan anda menentukan mod adunan anda sendiri jika anda mahu warna dalam lapisan berbeza berinteraksi secara berbeza. Kami akan membincangkan perkara ini dalam tutorial seterusnya dalam siri ini. 🎜 🎜Berikut ialah kod JavaScript untuk menggunakan mod adunan berbeza pada imej: 🎜

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

🎜Dalam coretan kod di atas, kami mendapat nilai warna heksadesimal daripada medan input. Kemudian sapukan warna itu pada lapisan baharu. Anda boleh menulis kod untuk menggunakan mod campuran lain dengan cara yang sama. 🎜

尝试在输入字段中指定您选择的颜色，然后通过单击相应的按钮应用任何混合模式。在示例中，我已将混合模式应用于纯色，但您也可以将它们应用于上一节中的重叠图像。

CamanJS 中的事件

如果您在第一个教程或第二个教程的演示中上传了任何大图像，您可能会注意到，任何应用的滤镜或混合模式的结果在很长一段时间后变得明显。

大图像具有大量像素，在应用特定混合模式后计算每个像素的不同通道的最终值可能非常耗时。例如，当对尺寸为 1920*1080 的图像应用 multiply 混合模式时，设备必须执行超过 600 万次乘法和除法。

在这种情况下，您可以使用事件向用户提供有关滤镜或混合模式进度的一些指示。 CamanJS 有五个不同的事件，可用于在不同阶段执行特定的回调函数。这五个事件是 processStart、processComplete、renderFinished、blockStarted 和 blockFinished。

processStart 和 processComplete 事件在单个过滤器开始或完成其渲染过程后触发。当您指定的所有过滤器都已应用于图像时，库将触发 renderFinished 事件。

CamanJS 在开始操作之前将大图像分成块。 blockStarted 和 blockFinished 事件在库处理完图像的各个块后触发。

在我们的示例中，我们将仅使用 processStart 和 renderFinished 事件来通知用户图像编辑操作的进度。

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

通过 processStart 和 processFinish 事件，您可以访问当前在图像上运行的进程的名称。另一方面，blockStarted 和 blockFinished 事件使您可以访问块总数、当前正在处理的块以及已完成块的数量等信息。

尝试单击下面演示中的任何按钮，您将在画布下方的区域中看到当前操作图像的进程的名称。

最终想法

本系列的第一个教程向您展示了如何使用 CamanJS 库中的内置滤镜创建基本图像编辑器。本教程向您展示了如何处理多个图层以及如何对每个图层单独应用不同的滤镜和混合模式。

由于大图像的图像编辑过程可能需要一段时间，因此我们还学习了如何向用户表明图像编辑器实际上正在处理图像而不是闲置。

在本系列的下一个也是最后一个教程中，您将学习如何在 CamanJS 中创建自己的混合模式和滤镜。如果您对本教程有任何疑问，请随时在评论中告诉我。

Atas ialah kandungan terperinci Bangunkan alat penyuntingan imej dengan CamanJS: Teroka lapisan, mod pengadunan dan pengendalian acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!