jquery Cropper getData function is returning an object instead of a data:image

Question

I am making this post because I have been struggling to get this widget to work but without success so far, and its really frustrating, because it really seems simple enough to configurate in just a copule of seconds and I am sure that I am doing something wrong.

I am using version v0.7.9 and this is the script I use to start the widget.

            var $image = $("#target img");
            originalData = {};


        $("#bootstrap-modal").on("shown.bs.modal", function() {
                  $image.cropper({

                    preview: ".img-preview",
                    multiple: true,
                    data: originalData,
                    done: function(data) {
                    }
                  });


        }).on("hidden.bs.modal", function() {
              originalData = $image.cropper("getDataURL", "image/jpeg");
                 $('#dataURLView img').attr('src', originalData);
                 console.log(originalData);

        });

what I am looking for is to emulate the same behaviour of the modal bootstrat example shown at the cropper hompage.

    <div class="modal fade" id="bootstrap-modal">
  <div class="modal-dialog" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalLabel">Crop the image</h4>
      </div>
      <div class="modal-body">
        <div id="target">
          <img id="image" src="sample_image.jpg" alt="Picture">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The originaldata var is supposed to get the cropping result as a data:image type and then set it as an img url but it is not working so far. Everything except the cropping result is working. This is the result I get on the console. enter image description here

Answer 1

I just found the problem. This base 64 url output was a new functionality the creator added so thats why I couldnt find the correct way to implement it. This is the code you should use to get it:

var data = $image.cropper('getCroppedCanvas').toDataURL() ;

then output data into a src field :)