Using Jcrop with file-input to crop image before upload

Question

In my rails app, I am using jcrop with krajee's bootstrap-fileinput . I attach fileinput to my form and then I try to use jcrop on the img element. When I do this, the image preview disappears and in it's place an icon for a broken image. I'm not sure what's going on.

  var btnCust = '<button type="button" class="btn btn-default crop-image" title="Add picture tags">' +
      '<i class="glyphicon glyphicon-tag"></i>' +
      '</button>';

  var previewCust = '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">' +
              '<div class="kv-file-content">' +
              '<img src="{data}" class="kv-preview-data file-preview-image cropbox" title="{caption}" alt="{caption}">' +
              '</div>' +
              '{footer}' +
              '</div>';

  $('#update-profile-photo-input').fileinput({
    showClose: false,
    browseLabel: '',
    removeLabel: '',
    showCaption: false,
    defaultPreviewContent: "<img src='" + $('.profile-image').attr('src') + "' alt='Your Avatar' class='cropbox'>",
    layoutTemplates: {main2: '{preview} ' +  btnCust + ' {remove} {browse}', footer: ''},
    previewTemplates: {image: previewCust}
  });

  $('.crop-image').on('click', function () {
    $('.cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 175, 175],
      onSelect: update,
      onChange: update
    })
  });

  function update(coords) {
      $('#user_crop_x').val(coords.x);
      $('#user_crop_y').val(coords.y);
      $('#user_crop_w').val(coords.w);
      return $('#user_crop_h').val(coords.h);
  }

Below is part of the html that is created by file-input.

html

<div class="kv-file-content">
  <img src="blob:https%3A//my-app-werfds.c9.io/11176113-aab3-477c-bf1e-cf21a9c54cab" class="kv-preview-data file-preview-image cropbox" title="IMG_0315.JPG" alt="IMG_0315.JPG">
</div>

Is there something weird about the preview image that jcrop is having a problem with? In my console I get an error that says GET blob:https%3A//my-app-werfds.c9.io/11176113-aab3-477c-bf1e-cf21a9c54cab 404 (not found)

I wasn't sure what else to include. I didn't include the form because I'm not trying to submit it yet. I'm just having a problem with jcrop working on the preview img.

Here is a jsfiddle (it was hard for me to implement all the above code but this is basically what is happening)

Answer 1

Was unable to locate if or where Blob URL is revoked, though was able to create a workaround by creating a <canvas> element, using .toDataURL() and replacing src of .file-preview-image with data URI of existing image before calling .Jcrop()

 $('.crop-image').on('click', function () {
    var img = $('.file-preview-image');
    var canvas = $("<canvas>")[0];
    canvas.width = img[0].naturalWidth;
    canvas.height = img[0].naturalHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img[0], 0, 0);
    var url = canvas.toDataURL();
    img.attr("src", url).Jcrop()
 });

jsfiddle https://jsfiddle.net/bea09mz9/3/