How to crop a large image using Jcrop by resizing it?

Question

I am trying to crop a large image using Jcrop by setting its height and width attributes customized.I have tried many options in Jcrop, but nothing seems to work. Here is my code:

HTML:

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            <img id="Image1" src="" alt="" style="display: none; height:600px; width:600px;" />
        </td>
        <td>
            <canvas id="canvas" height="5" width="5"></canvas>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />

Jquery:

$(document).delegate('#cover-image','change', function(e){
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#Image1').show();
            $('#Image1').attr("src", e.target.result);
            $('#Image1').Jcrop({
                setSelect: [ 0,0,600,180 ],
                aspectRatio: 10/3,
                boxWidth: 600,
                boxHeight: 600,
                trueSize: [600, 600],
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            });
        }

        reader.readAsDataURL($(this)[0].files[0]);      
    });

    $('#btnCrop').click(function () {
        var x1 = $('#imgX1').val();
        var y1 = $('#imgY1').val();
        var width = $('#imgWidth').val();
        var height = $('#imgHeight').val();
        var canvas = $("#canvas")[0];
        var context = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            canvas.height = 180;
            canvas.width = 600;
            context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height);
            $('#imgCropped').val(canvas.toDataURL());
            $('#btnCrop').hide();
        };
        img.src = $('#Image1').attr("src");
    });
});

function SetCoordinates(c) {
    $('#imgX1').val(c.x);
    $('#imgY1').val(c.y);
    $('#imgWidth').val(c.w);
    $('#imgHeight').val(c.h);
    $('#btnCrop').show();
    $('#save-cropped-image, #delete-image').hide();
};

I am trying to crop a large image fit in a div which is shorter than image, so the image get compressed in it. But when I crop this image, its not returning me the correct co-ordinates and correct image is not generating in the canvas.

I am stuck off from 4hrs.Any kind of help will be appreciated. Thanks!

I am already see this documentation. But does not found perfect solution. — Amandeep kaur

test test · Accepted Answer · 2017-02-21T13:29:20

Use this code. Get original size of image and then crop.

$(document).delegate('#cover-image','change', function(e){
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#Image1').attr("src", e.target.result);
                var $img = $("#Image1");
                $img.hide().removeClass("image12");
                var w = $img.width();
                var h = $img.height();
                $('#Image1').Jcrop({
                    trueSize: [w, h],
                    onChange: SetCoordinates,
                    onSelect: SetCoordinates
                });
            }

            reader.readAsDataURL($(this)[0].files[0]);      
        });

<style type="text/css">
.image12{
   height:600px; 
   width:600px;
}
</style>

<img id="Image1" class="image12" src="" alt="" style="display: none; " />

How to crop a large image using Jcrop by resizing it?

2 Answers