Skip Loading

[HTML5] Cropping image dengan Jcrop dan canvas

Pada artikel sebelumnya saya memberikan tutorial mengenai menggabungkan image dengan canvas. Di artikel tersebut, apabila kita menggunakan image yang aspek rasionya berbeda dengan frame, maka tampilannya agak sedikit aneh, karena image akan di strech. Untuk itu diartikel ini saya akan memberikan tutorial untuk melakukan cropping pada image dan menggambarnya pada canvas.

Untuk melakukan cropping kita akan menggunakan library jcrop (http://deepliquid.com/content/Jcrop.html).

Kode untuk melakukan cropping:

<script type='text/javascript'>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var x, y, w, h;
            var img;
            function updateCoords(c)
            {
                x = c.x;
                y = c.y;
                w = c.w;
                h = c.h;
            };

            $(document).ready(function () {
                $(".modal").overlay({
                    mask: {
                        color: '#ebecff',
                        loadSpeed: 200,
                        opacity: 0.9
                    },
                    closeOnClick: false
                });
                var frameimg = new Image();
                frameimg.src = "images/truck.png";
                frameimg.onload = function () {
                    context.drawImage(frameimg, 0, 0);
                }
                $("#btn-crop").click(function (e) {
                    $(".modal").overlay().close();
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    width = img.width;
                    height = img.height;
                    context.drawImage(img, x, y, w, h, 81, 56, 250, 166);
                    context.drawImage(frameimg, 0, 0);
                });

                $("#loadimage").click(function (e) {
                    var url = $.trim($("#filename").val());
                    if (url != "") {
                        img = new Image();
                        img.src = url;
                        img.onload = function () {
                            $("#cropcontainer").html("<img id='imgcrop' src='" + url + "'/>")
                            $(".modal").overlay().load();
                            $('#imgcrop').Jcrop({
                                onSelect: updateCoords,
                                onChange: updateCoords,
                                setSelect: [0, 0, 100, 100],
                                aspectRatio: 250 / 166,
                                allowSelect:false
                            });

                        }
                        img.onerror = function () {
                            alert("Error Loading Image");
                        }
                    } else {
                        alert("Enter image url");
                    }
                });
            });
        </script>

Dengan perintah ini $("#cropcontainer").html("<img id='imgcrop' src='" + url + "'/>"), saya menginject html pada element cropcontainer, yang berisikan image yang akan di crop dengan id imgcrop.  Untuk menjalankan jcrop, gunakan kode ini:

$('#imgcrop').Jcrop({ 
onSelect: updateCoords, 
onChange: updateCoords, 
setSelect: [0, 0, 100, 100], 
aspectRatio: 250 / 166, 
allowSelect:false
 });

Penjelasan parameter:

aspectRatio, adalah aspekrasio untuk selection box cropping, disini saya menggunakan aspek rasio sesuai bak truk yang akan di tutup dengan image, yaitu 250x166 pixel, sehingga aspek rasionya adalah 250,166.

onSelect, adalah fungsi yang akan dijalankan ketika user melakukan perubahan selection. onChange adalah fungsi yang akan dijalankan jcrop melakukan seleksi awal dengan parameter setSelect. Di sini saya mmeberikan fungsi updateCoords, yang berfungsi menyimpan selection box ke dalam parameter x, y, w dan h.

var x, y, w, h;
var img;
function updateCoords(c)
{
   x = c.x;
   y = c.y;
   w = c.w;
   h = c.h;
};

Jadi setiap user melakukan perubahan selection box, parameternya akan disimpan dalam variabel2 tersebut, yaitu x,y adalah koordinat awal selection, w dan h adalah lebar dan tinggi selection box.

Untuk menggambarnya ke canvas, gunakan kode berikut:

$("#btn-crop").click(function (e) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(img, x, y, w, h, 81, 56, 250, 166);
      context.drawImage(frameimg, 0, 0);
 });

context.drawImage(img, x, y, w, h, 81, 56, 250, 166); adalah perintah untuk menggambar ke canvas, dimana img adalah image yang dipakai, x,y,w,h adalah parameter yang kita ambil dari Jcrop, (81,56) adalah koordinat pinggir bak truk, (250,166) adalah dimensi bak truk sebagai frame.

Contoh lengkapnya bisa dilihat di sini.

www.paulussetyo.com

Related Posts
Comments ( 0 )
Add Comment

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