Cara Menggunakan Kanvas JavaScript untuk Menambahkan Perbatasan Kustom ke Gambar Bertopeng

Menguasai Batas Gambar Bertopeng di Kanvas JavaScript

Penggabungan beberapa gambar adalah langkah umum dalam pembuatan efek visual JavaScript. Mendefinisikan area pandang suatu gambar dengan topeng adalah teknik yang sering dilakukan. Meskipun hal ini berguna untuk membuat bentuk yang unik, menambahkan batas di sekeliling bentuk yang disamarkan tersebut dapat menjadi tantangan. Meskipun kanvas elemen dalam JavaScript menawarkan manipulasi gambar yang ekstensif, tidak mudah untuk menyesuaikan batas di sekitar gambar yang telah di-mask.

Pengembang dapat menerapkan topeng dan klip gambar dengan cara yang imajinatif dengan API Kanvas, meskipun secara default, setiap batas yang dihasilkan cenderung cocok dengan bentuk persegi panjang kanvas. Saat Anda ingin membuat batas yang cocok dengan tepi bentuk rumit yang ditentukan oleh topeng, hal ini menimbulkan masalah. Tujuannya adalah untuk mengikuti perjalanan topeng secara tepat melewati batas persegi panjang.

Posting ini akan menjelaskan cara menerapkan masker gambar dalam JavaScript dan, yang lebih penting, cara memastikan bahwa bentuk berbeda dari gambar bertopeng dikelilingi oleh batas. Selain itu, kita akan membahas fungsi yang menyelesaikan masking tetapi belum memiliki solusi batas yang ditentukan.

Anda dapat menyempurnakan tampilan perbatasan dengan mempelajari cara bekerja dengan operasi komposit di kanvas. Mari kita mulai dan lihat cara menggunakan fitur kanvas JavaScript untuk menambahkan batas yang diperlukan di sekitar gambar bertopeng.

Mengenali Cara Menerapkan Perbatasan pada Gambar Bertopeng

Tujuan dari skrip yang disediakan adalah menggunakan gambar lain sebagai topeng untuk satu gambar, dan kemudian menggunakan gambar tersebut API Kanvas untuk menambahkan batas khusus di sekitar bentuk yang disamarkan. Dua objek gambar baru dibuat di awal fungsi mask dan gambar utama. Saat memuat foto dari sumber eksternal, pengaturan lintas sumber sangat penting untuk mencegah masalah akibat CORS. Kanvas dibentuk dan proporsinya disesuaikan agar sesuai dengan gambar topeng setelah kedua gambar dimuat. Hal ini menghindari masalah pengubahan ukuran selama menggambar gambar dan menjamin bahwa kanvas siap untuk dikerjakan dengan area yang sesuai.

Script kemudian menggunakan gambar gambar() berfungsi untuk menggambar gambar topeng ke kanvas. Dengan melakukan hal ini, masker diaplikasikan pada kanvas, berfungsi sebagai lapisan dasar untuk prosedur masking. Operasi komposit global harus disetel ke "source-in" untuk menerapkan mask dengan benar. Kanvas diinstruksikan untuk mempertahankan hanya area gambar utama yang bertepatan dengan gambar topeng. Intinya, topeng menentukan bentuk potongan gambar utama. Operasi komposit diatur ulang ke "source-over" ketika gambar utama digambar di dalam area kliping ini, memungkinkan tindakan tambahan seperti pengecatan tepi tanpa mempengaruhi konten yang sebelumnya terpotong.

Menerapkan batas pada bentuk bertopeng melibatkan penggunaan stroke() teknik. Jalur atau formulir tertentu di kanvas ditunjukkan dengan perintah ini. Dalam solusi kedua, moveTo() dan lineTo() digabungkan untuk menghasilkan jalur kanvas secara manual dan menelusuri batas topeng. Dengan menggunakan teknik ini, Anda dapat menentukan bentuk batas secara manual dan memastikan batas tersebut mengikuti bentuk topeng, bukan batas kanvas persegi panjang. Anda memiliki kendali penuh atas tampilan perbatasan karena lebar garis properti mengatur ketebalan perbatasan dan gaya stroke properti menentukan warnanya.

Terakhir, fungsi toDataURL() digunakan untuk mengubah kanvas menjadi string Base64. Dengan melakukan ini, gambar akhir—termasuk mask dan border—diubah menjadi format yang mudah digunakan di area lain program atau diunggah ke server. Untuk menghindari kesalahan waktu, janji tersebut memastikan bahwa operasi ini hanya berakhir ketika kedua gambar telah dimuat penuh. Skrip ini menunjukkan betapa canggihnya teknik modifikasi gambar, termasuk menutupi dan menerapkan batas dinamis yang sama persis dengan kontur topeng, dapat dicapai dengan elemen kanvas JavaScript.

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'red'; // Border color
                ctx.stroke(); // Draw border around mask
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                // Create path for the mask shape
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(maskImg.width, 0);
                ctx.lineTo(maskImg.width, maskImg.height);
                ctx.lineTo(0, maskImg.height);
                ctx.closePath();
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'blue'; // Border color
                ctx.stroke(); // Apply the border along the path
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

Meningkatkan Gambar Bertopeng dengan Batas Khusus di JavaScript

Pengalaman pengguna aplikasi JavaScript Anda dapat ditingkatkan secara signifikan dengan kemampuan untuk menutupi gambar dan menetapkan batas khusus saat berhadapan dengan API Kanvas. Dengan bantuan masking, Anda dapat memutuskan area mana dari suatu gambar yang terlihat bergantung pada gambar lain, yang dikenal sebagai mask. Menambahkan perbatasan di sekitar zona bertopeng adalah masalah yang banyak ditemui pengembang, terutama ketika topengnya bukan berbentuk persegi panjang. Proyek dengan batas yang sama persis dengan garis luar topeng akan tampak lebih halus dan ahli.

Solusi yang berguna untuk masalah ini adalah dengan menggunakan Canvas API Jalur2D obyek. Anda dapat menggunakan Path2D untuk merancang rute rumit yang sesuai dengan kontur topeng Anda dan kemudian mengelilinginya dengan pembatas. Metode ini memungkinkan Anda menghasilkan batas yang sama persis dengan sudut topeng khusus Anda, melampaui persegi panjang konvensional. Menggunakan moveTo() Dan lineTo() bersama-sama memudahkan untuk menelusuri garis luar topeng dan menjamin garis batas yang sejajar dengan tepat.

Performa adalah faktor penting lainnya yang perlu dipertimbangkan, terutama saat bekerja dengan gambar yang lebih besar atau menerapkan batas secara dinamis dan real-time. Kecepatan aplikasi Anda dapat ditingkatkan dengan menggunakan strategi seperti menyimpan gambar yang disembunyikan dalam cache, mengurangi operasi menggambar, dan menyederhanakan proses rendering kanvas. Bahkan dalam pengaturan yang rumit atau berperforma tinggi, Anda dapat menjamin bahwa prosedur penyembunyian dan penggambaran batas berjalan lancar dengan mengurangi tindakan yang tidak berguna.