base64 format about cropper HOT 3 CLOSED

Ah, it turns out that I was invoking cropper too soon, as the readAsDataURL method happens asynchronously.

The solution was to use the FileReader onloadend event:

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function (e) { $('#image').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);

        reader.onloadend = (function () {
            $('#image').cropper();
        });
    }
}

from cropper.

If you check the Crop Avatar example, you will find that I get the image src (data uri, base64) from the file input with the FileReader api when the browser support it.

from cropper.

Hi Fengyuan, great plugin.

I'm struggling with this a bit. What I'm trying to do is crop an image without ever uploading it to the server filesystem (I have important privacy reasons for doing so). So I'm using this:

<img id="image"> /*Image which will get the base64 src*/
<input type="file" id="imageUpload" accept="image/*"> /*Our image upload input*/

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#image').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);

        $('#image').cropper(); //invoke the cropper
    }
}
$("#imageUpload").change(readURL);

I have looked at your Crop Avatar example, but I can't quite figure out what's going on. I think your example has a fallback for when the browser doesn't support the FileReader api but I don't understand what I need to do differently to invoke the cropper on my image with a base64 src.

Could you point me in the right direction?

from cropper.