How to get original height and width of an image after setting its custom height and width in Jcrop

Question

I m trying to crop an image using Jcrop plugin.The uploaded image is larger than the dimensions I want(600X600).

What I am doing is initially setting image dimensions to 600X600 to display it to user and then setting its dimensions to original height and width. and after that setting the original height and width into "trueSize" option of Jcrop to get correct cropping.

The problem is I am not getting the correct original height and width of the uploaded image on first time. but when I upload it again without clearing cache, it works fine. I want to get original size of the image in the first time. 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;" />
        </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){
        $('.update-img').hide();
        $('#Image1').hide();
        $('#loader1').show();
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#Image1').attr("src", e.target.result);
            var $img = $("#Image1");
            $img.hide().removeClass("image12");
            var width = $img.width();
            var height = $img.height();
            $img.addClass("image12").show();

            $('#Image1').Jcrop({
                setSelect: [ 0,0,600,180 ],
                aspectRatio: 10/3,
                trueSize: [width, height],
                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();
            $('#save-cropped-image, #delete-image, .preview').show();
        };
        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();
};

CSS:

.image12{
   height:600px; 
   width:600px;
}

Please reply fast if anyone knows the answer. Thanks!

Answer 1

Used this code in jquery.js file

 $(document).delegate('#cover-image','change', function(e){
    $('.update-img').hide();
    $('#Image1').hide();
    $('#loader1').show();
    var reader = new FileReader();
    reader.onload = function (e) {      
        var image = new Image();
        //Set the Base64 string return from FileReader as source.
        image.src = e.target.result;
        $('#Image1').attr("src",image.src);

        image.onload = function () {
            var height = this.height;
            var width = this.width;
            // alert(height+"and"+width);
            var jcrop_api = $('#Image1').Jcrop({
                trueSize: [width, height],
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            })
        }

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