Cropper: How do I load a new image?

Created on 15 Apr 2015 · 4Comments · Source: fengyuanchen/cropper

Hi,
Please can someone give me a code snippet for loading a new client side image using the <input type="file"> control? I see that there is one in the demo, but I'm not expert enough to extract the code for my own use.
Thanks in advance,
Martin

Source

ThameDBA

Most helpful comment

Here is the example that am using, you have to listen changes on your input, and on change you can attach the selected image to your img :

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

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

                reader.onload = function (e) {
                    $('#your_img').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

Hope it helps,
Reda Makhchan

makhchan on 15 Apr 2015

👍3

All 4 comments

Here is the example that am using, you have to listen changes on your input, and on change you can attach the selected image to your img :

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

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

                reader.onload = function (e) {
                    $('#your_img').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

Hope it helps,
Reda Makhchan

makhchan on 15 Apr 2015

👍3

Thanks very much, makhchan - you're a star. Your solution got me there with just one small change; I think our implimentations are slightly different as I had to change the line:

 $('#your_img').attr('src', e.target.result);

for

image_cropper.cropper('replace', e.target.result);

Just wish I had asked the question a week ago to save time on the hundreds of ways I found to successfully make it NOT work!

ThameDBA on 16 Apr 2015

You're welcome, happy that it was useful for you.
For me my cropper is on Modal, and I have another objet img in my form, that's why I'm using src for that image, about replace yes it do the job too.

makhchan on 17 Apr 2015

I did that and it's works fine.

var URL = window.URL || window.webkitURL,
    blobURL;

if(URL){
  $inputImage.change(function () {
      $('#edit-crop-image').fadeIn(300);
      $('#wrap-crop').removeClass('no-upload');
    var files = this.files,
        file;

    if (files && files.length) {
      file = files[0];

      if (/^image\/\w+$/.test(file.type)) {
        blobURL = URL.createObjectURL(file);
        $image.one('built.cropper', function () {
          URL.revokeObjectURL(blobURL); // Revoke when load complete
        }).cropper('reset', true).cropper('replace', blobURL);
      } else {
        showMessage('Please choose an image file.');
      }
    }
  });
} else {
  $inputImage.parent().remove();
}