Menggabungkan 2 Gambar Seperti Twibbon Menggunakan HTML dan JavaScript

Menggabungkan 2 Gambar Seperti Twibbon Menggunakan HTML dan JavaScript

DailyBlog.id - Pernah kah kalian disuruh untuk membuat Twibbon oleh sekolah atau universitas ataupun kegiatan acara lainnya? tentu saja, pasti di antara kalian pernah disuruh untuk membuat Twibbon dengan menggabungkan foto kalian beserta gambar "Campaign" yang telah diberikan. Jika kalian belum mengenal sama Twibbon, maka disini saya akan memberi tahu kalian mengenai apa itu Twibbon? Twibbon merupakan bingkai foto yang dibuat secara menarik untuk tujuan promosi, dukungan suatu acara, dan lainnya.

Apakah kalian sudah mengerti mengenai Twibbon? jika sudah, maka kita akan lanjut ke tutorial menggabungkan 2 gambar agar seperti Twibbon, hanya menggunakan HTML dan JavaScript. Mari kita buat sekarang:

Langkah pertama kalian bisa membuat file yang namanya twibbon.html, setelah itu isikan dengan struktur html yang ada dibawah ini. Kalian bisa copas scriptnya.


<!DOCTYPE html>
<html>
    <head>
        <title>Menggabungkan 2 Gambar Seperti Twibbon Menggunakan HTML dan JavaScript</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <!-- Isi <body>-->
    </body>
</html>


Setelah itu kalian copas script yang dibawah ini, dimana script dibawah ini nantinya akan berfungsi sebagai gambar kalian dan gambar dari bingkai Twibbon nya. Letakkan script dibawah ini dalam <body></body> 

<!-- Ganti gambarkalian.jpg dengan gambar yang akan kalian pakai -->
<img src="gambarkalian.jpg" id="gambarKalian" width="300" height="300" hidden="true">

<!-- Ganti gambartwibbon.jpg dengan gambar bingkai Twibbon kalian -->
<img src="gambartwibbon.png" id="gambarTwibbon" width="300" height="300" hidden="true">

<!-- 2 Gambar akan digabungkan pada area canvas -->
<b>Hasil Twibbon</b><br/><br>
<canvas id="canvas"></canvas>


Setelah copas script dibawah, maka langkah selanjutnya kalian bisa copy script dibawah ini. Fungsi dari script dibawah ini, nantinya akan menggabungkan foto kalian dengan bingkai Twibbon di area canvas nantinya.

<!-- JavaScript buat menggabungkan 2 gambar -->
<script type="text/javascript">
    window.onload = () =>
    {
        const gambarKalian  = document.getElementById('gambarKalian');
        const gambarTwibbon = document.getElementById('gambarTwibbon');
        const canvas        = document.getElementById('canvas');
        const context       = canvas.getContext('2d');
        const width         = gambarTwibbon.width;
        const height        = gambarTwibbon.height;
        canvas.width        = width;
        canvas.height       = height;
    
        context.drawImage(gambarKalian, 0, 1, width, height);
        context.getImageData(0, 0, width, height);
        context.drawImage(gambarTwibbon, 0, 0, width, height);
        context.getImageData(0, 0, width, height);
    }
</script>


Jika sudah, coba kalian buka file twibbon.html (contoh: http://localhost/twibbon.html) di browser kalian. Dan lihat hasil Twibbon yang telah kalian buat. Dan pastikan jika kalian membuat Twibbonnya, ukuran dari gambar kalian dan bingkainya harus pas dan cocok (1:1).

Untuk script versi fullnya bisa kalian copy dibawah ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Menggabungkan 2 Gambar Seperti Twibbon Menggunakan HTML dan JavaScript</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <!-- Ganti gambarkalian.jpg dengan gambar yang akan kalian pakai -->
        <img src="gambarkalian.jpg" id="gambarKalian" width="300" height="300" hidden="true">

        <!-- Ganti gambartwibbon.jpg dengan gambar bingkai Twibbon kalian -->
        <img src="gambartwibbon.png" id="gambarTwibbon" width="300" height="300" hidden="true">

        <!-- 2 Gambar akan digabungkan pada area canvas -->
        <b>Hasil Twibbon</b><br/><br>
        <canvas id="canvas"></canvas>
        
        <!-- JavaScript buat menggabungkan 2 gambar -->
        <script type="text/javascript">
            window.onload = () =>
            {
                const gambarKalian  = document.getElementById('gambarKalian');
                const gambarTwibbon = document.getElementById('gambarTwibbon');
                const canvas        = document.getElementById('canvas');
                const context       = canvas.getContext('2d');
                const width         = gambarTwibbon.width;
                const height        = gambarTwibbon.height;
                canvas.width        = width;
                canvas.height       = height;
            
                context.drawImage(gambarKalian, 0, 1, width, height);
                context.getImageData(0, 0, width, height);
                context.drawImage(gambarTwibbon, 0, 0, width, height);
                context.getImageData(0, 0, width, height);
            }
        </script>
    </body>
</html>


Untuk contoh Twibbon yang telah saya buat, hasilnya seperti dibawah ini, jika ukuran foto kalian dan ukuran bingkai dari Twibbon kalian cocok yaitu 1:1

Menggabungkan 2 Gambar Seperti Twibbon Menggunakan HTML dan JavaScript - Contoh Twibbon


Nah begitulah cara menggabungkan 2 gambar agar seperti twibbon dengan menggunakan html dan javascript. Kalian juga bisa mengembangkan script diatas sesuai dengan selera kalian. Mungkin saja kalian bisa membuat tools Twibbon lalu bisa digunakan oleh banyak orang. Dan kalian bisa menghasilkan dollar dari tools yang kalian buat, ya kan? Ya tentunya...

Oke, mungkin sampai disini saja artikel dari saya mengenai cara menggabungkan 2 gambar agar seperti Twibbon hanya menggunakan HTML dan JavaScript. Jika saya ada salah kata atau salah pengetikkan, saya mohon maaf. Sekian, dan terima kasih...

Selamat Mencoba!

Previous Post Next Post