Skip Loading

[HTML5] Menggabungkan image dengan canvas

Pada artikel sebelumnya saya telah menulis tentang  cara menyimpan canvas image sebagai file bitmap. Di artikel ini akan diberikan cara bagaimana load image dari url ke canvas dan menggabungkan 2 image. Misalkan kita akan membuat aplikasi photo frame sederhana, yaitu user memberikan url photo, dan kita gabungkan dengan frame photo.

untuk mengupload image ke dalam canvas, gunakan code javascript sebagai berikut:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var frameimg = new Image();
      frameimg.src = url_image_to_load;
      frameimg.onload = function () {
     context.drawImage(frameimg, 0, 0);
}

Sebagai contohnya, saya menggunkan photo bak truk sebagai frame.

Image ini berukuran 400x347pixel dan bagian belakang truk yang akan diisi photo berukuran 250x166 pixel. Image yang digunakan adalah png dengan bagain belakang truk (warna abu-abu) adalah transparant (bolong). Langkah pertama adalah menggambar image truk tersebut pada canvas.

<html>
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #container{
            margin: 0 auto;
            width: 760px;
            display: block;
            overflow: hidden;
        }
        #image_container{
            display: inline-block;
            width: 400px;height:347px;overflow:hidden;
            position: relative;
            background: #ccc;
        }
        #canvas{
            display: block;
            position: absolute;
            top:0;
        }
        .button{
            display: inline-block;
            background: #ccc;
            padding: 5px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
    <body>
        <div id="container">
            <div id="editor" class="">
                <div id="image_container">
                    <canvas id="canvas" width="400" height="347">

                    </canvas>
                </div> 
                <p>
                    Masukkan url image:<br/>
                    <input type="text" name="filename" id="filename" size="30" value="images/cinta-laura-071.jpg"/>
                    <button id="loadimage">Load Image</button>
                </p>
                <p>
                    <a class="button" id="btn-download" download="my-file-name.png">Save As PNG</a>
                    <a class="button" id="btn-download2" download="my-file-name.jpg">Save As JPG</a>
                </p>
            </div>
        </div>
        <script type='text/javascript'>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            
            $(document).ready(function () {
                var frameimg = new Image();
                frameimg.src = "images/truck.png";
                frameimg.onload = function () {
                    context.drawImage(frameimg, 0, 0);
                }
            });
        </script>
    </body>
</html>

Perhatikan pada bagain script $(document).ready, di sini saya memasukkan kode untuk loading photo ke canvas. Dengan script ini akan menampilkan image truck saja.

$(document).ready(function () { 
    var frameimg = new Image(); 
    frameimg.src = "images/truck.png";
    frameimg.onload = function () { 
        context.drawImage(frameimg, 0, 0); 
    } 
});

Kemudian kita tambahkan  input text untuk memasukkan url image dan button untuk load image ke canvas.

pada script $(document).ready, kita tambahkan:

          $("#loadimage").click(function (e) {
                    var url = $.trim($("#filename").val());
                    if (url != "") {
                        var img = new Image();
                        img.src = url;
                        img.onload = function () {
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            width = img.width; height = img.height;
                            context.drawImage(img, 0, 0, width, height, 81, 56, 250, 166);
                            context.drawImage(frameimg, 0, 0);
                        }
                        img.onerror = function () {
                            alert("Error Loading Image");
                        }
                    } else {
                        alert("Enter image url");
                    }
                });

Perhatikan pada bagian ini:

  var img = new Image();
  img.src = url;
  img.onload = function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
      width = img.width;
      height = img.height;
      context.drawImage(img, 0, 0, width, height, 81, 56, 250, 166);
      context.drawImage(frameimg, 0, 0);
   }

Untuk proses pengabungan ini, kita terlebih dahulu me-load photo, baru kemudian di atasnya kita load image frame. Karena canvas sudah ada gambar frame, maka kita reset terlebih daulu dengan perintah context.clearRect(0, 0, canvas.width, canvas.height);. Untuk me-load photo, kita gunakan perintah context.drawImage(img, 0, 0, width, height, 81, 56, 250, 166);.  Yaitu kita menggambar image di canvas pada koordinat 81, 56 (bagian tepi bak truk) dengan ukuran 250x166.

Untuk contoh lengkapnya lihat di sini.

www.paulussetyo.com

 

Comments ( 0 )
Add Comment

Your email address will not be published. Required fields are marked *