CODEWITHSUNDEEP
javascriptjquerycropjcrop
Rajdeep Singh
Rajdeep Singh

Reputation: 17834

How to get the crop coordinates of an image before upload?

I am trying to get Jcrop plugin work after user selects an image by clicking on the browse button, we can load the preview of an image by using FileReader(), I am able to show the preview but when I am initializing Jcrop on change event of the browse button, it doesn't work. Below is the code.

Form

<form id="form1" runat="server">
    <input type='file' id="imageInput" />
    <img id="blah" src="#" alt="your image" />
</form>

Javascript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
    $("#blah").Jcrop();
});

In the above Javascript code when I am adding $("#blah").Jcrop();, the preview doesn't work and I get a black line instead. I have created a Fiddle to demonstrate the same http://jsfiddle.net/LvsYc/8230/

Please help!

Upvotes: 0

Views: 645

Answers (1)

sbgoran
sbgoran

Reputation: 3541

Try moving Jcrop call inside FileReader.onload callback like this (I tried it in FF inside your fiddle and it works fine)

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
            $("#blah").Jcrop();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
});

Upvotes: 1

Related Questions