CODEWITHSUNDEEP
jqueryhtmlcssjcrop
orbnexus
orbnexus

Reputation: 797

JCrop get cropped width and height

I am using JCrop and it is working really fine. But When I click the "crop button" then it just always generates the image with "300px" x "150px". I just want to generate image based on the cropped area size. I want the width and height of the cropped image should be dynamic. Please check my code below.

I will really appreciate if you just point out that where should i tweak my code to generate cropped image with actual cropped area width and height

$('img').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50]
});
function showPreview(c) {
    if (parseInt(c.w) > 0) {
    // Show image preview
    var imageObj = $("#content-container img.highlighted")[0];
    var canvas = $("#preview")[0];
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
}
$('button.crop').click(function () {
       var can = document.getElementById('preview');
       var img = can.toDataURL("image/png");
       $('div').before('<img src="' + img + '" class="cropped highlighted" data-reset="' + thisAttr + '"/>');
   });

Upvotes: 0

Views: 1311

Answers (1)

orbnexus
orbnexus

Reputation: 797

I figured it out. Basically I have used the variables 'c.w', and 'c.h' as they hold dynamic height and width of the canvas. So i just put them in the public variables and then used them on my other function where i am generating image.

Upvotes: 1

Related Questions