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 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 , 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.

Memerintah	Contoh penggunaan
globalCompositeOperation	Komposisi tindakan menggambar di kanvas ditentukan oleh fitur ini. GlobalCompositeOperation ='source-in' dalam contoh ini memastikan bahwa gambar topeng memotong gambar utama sehingga hanya area yang berpotongan yang terlihat.
toDataURL()	Mengubah informasi kanvas menjadi gambar yang dikodekan dengan Base64. Hal ini memungkinkan untuk memanfaatkan gambar yang sudah jadi sebagai PNG setelah menerapkan mask dan border. Output gambar contoh dihasilkan menggunakan canvas.toDataURL('image/png').
crossOrigin	Fitur ini menghormati batasan keamanan dengan mengaktifkan penggunaan gambar yang dimuat dari domain berbeda di kanvas. MaskImg.crossOrigin = 'anonymous' menjamin bahwa akses ke gambar mask dapat dilakukan tanpa menimbulkan masalah CORS.
beginPath()	Di kanvas, jalur baru dapat dimulai menggunakan metode ini. Metode kedua memanggil ctx.beginPath() untuk memastikan bahwa jalur mengikuti kontur mask saat menggambar batas khusus di sekitar gambar yang di-mask.
moveTo()	Dengan prosedur ini, tidak ada gambar yang dibuat; sebaliknya, "pena" tersebut dipindahkan ke tempat awal yang baru. Titik awal perbatasan diposisikan dalam contoh menggunakan ctx.moveTo(0, 0), yang penting untuk menggambar perbatasan secara akurat di sekitar batas mask.
lineTo()	Dengan menggunakan koordinat yang diberikan sebagai titik awal, teknik ini menggambar garis lurus. Batas gambar bertopeng ditentukan oleh garis yang digambar dalam solusi menggunakan ctx.lineTo(maskImg.width, 0).
stroke()	Sepanjang jalur yang ditentukan, buatlah batas atau garis. Misalnya, moveTo() dan lineTo() digunakan untuk mendefinisikan bentuk mask, lalu ctx.stroke() digunakan untuk menerapkan batas di sekitar gambar yang di-mask.
lineWidth	Menentukan seberapa tebal garis yang dilukis pada kanvas. Skrip membuat batas setebal 5 piksel di sekeliling bentuk topeng menggunakan ctx.lineWidth = 5.
strokeStyle	Menunjukkan warna atau gaya perbatasan. Warna border pada contoh diatur menjadi merah dengan menggunakan ctx.strokeStyle ='red'.

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 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 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 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 properti mengatur ketebalan perbatasan dan 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 . 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 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 Dan 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.

1. Dalam JavaScript, bagaimana saya bisa menggunakan gambar lain untuk menutupi gambar tersebut?
2. Menggunakan diatur ke , gambarkan topeng di kanvas untuk menutupi gambar menggunakan . Untuk mencocokkan topeng, ini akan memotong gambar utama.
3. Bagaimana cara membuat batas pada gambar bertopeng yang sesuai dengan bentuknya?
4. Setelah menetapkan rute topeng dengan Dan , gunakan teknik. Ini memungkinkan Anda melingkari bentuk topeng dengan garis tepi yang dipersonalisasi.
5. Apa tujuannya dalam manipulasi kanvas?
6. Konten kanvas diubah menjadi gambar berkode Base64 melalui fungsinya, membuatnya mudah untuk digunakan atau didistribusikan sebagai gambar PNG.
7. Bagaimana cara mengoptimalkan operasi kanvas untuk kinerja?
8. Kurangi jumlah operasi menggambar dan pertimbangkan untuk menyimpan elemen yang umum digunakan untuk memaksimalkan kecepatan kanvas. Hal ini membuat aplikasi Anda berfungsi dengan lancar dan mengurangi jumlah penarikan ulang.
9. Bisakah saya memuat gambar lintas asal di kanvas?
10. Ya, tetapi untuk membuat gambar tersedia tanpa menyebabkan kesulitan CORS, Anda perlu mengaturnya properti ke .

Dalam aplikasi JavaScript, menutupi gambar dan menerapkan batas khusus di kanvas adalah cara efektif untuk membuat elemen visual yang disempurnakan. Pengembang memiliki kemampuan untuk memanipulasi rendering dan gaya gambar dengan memanfaatkan dan perintah menggambar yang canggih seperti dan definisi jalur.

Performa yang mulus dipastikan dengan mengoptimalkan operasi border dan masking secara hati-hati, terutama untuk foto yang lebih besar. Tutorial ini memberikan metode yang berguna untuk mengecat batas secara dinamis di sekitar gambar non-persegi panjang, yang berguna saat mengembangkan aplikasi online yang estetis dan responsif.