Javascript 在上传前使用Jcrop将文件输入裁剪图像

在我的rails应用程序中，我将jcrop与krajee的一起使用。我将fileinput附加到表单中，然后尝试在img元素上使用jcrop。当我这样做时，图像预览将消失，并在它的位置上显示一个损坏图像的图标。我不知道发生了什么事

  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);
  }

var btnCust=''+
'' +
'';
变量previewCust=''+
'' +
'' +
'' +
“{footer}”+
'';
$（“#更新配置文件照片输入”）.fileinput({
showClose:false，
棕色标签：“”，
移除标签：“”，
说明：错，
defaultPreviewContent:“”，
layoutTemplates:{main2:'{preview}'+btnCust+'{remove}{browse}'，页脚：'''，
预览模板：{image:previewCust}
});
$（'.crop image'）。在（'click'，函数（）{
$（'.cropbox'）.Jcrop({
方面：1，
setSelect:[0,0,175,175]，
onSelect:update，
onChange：更新
})
});
功能更新（coords）{
$（'#user_crop_x'）.val（coords.x）；
$（'#user_crop_y'）.val（coords.y）；
$（'#user_crop_w'）.val（coords.w）；
返回$（'#user_crop_h'）.val（coords.h）；
}

下面是由文件输入创建的html的一部分

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>

jcrop对预览图像有什么问题吗？在我的控制台中，我收到一个错误，上面写着

get blob:https%3A//my-app-werfds.c9.io/11176113-aab3-477c-bf1e-cf21a9c54cab 404（未找到）

我不确定还包括什么。我没有包括表格，因为我还没有尝试提交它。我只是对jcrop在预览img上的工作有点问题

这是一个

---

（我很难实现上述所有代码，但基本上就是这样）

无法定位

Blob URL

是否被撤销或在何处被撤销，尽管我能够通过使用

.toDataURL（）创建
元素来创建一个变通方法

并在调用

.Jcrop（）

$（'.crop image'）。在（'click'，函数（）{
var img=$（'.file预览图像'）；
var canvas=$（“”）[0]；
canvas.width=img[0]。自然宽度；
canvas.height=img[0]。自然高度；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img[0]，0,0）；
var url=canvas.toDataURL（）；
img.attr（“src”，url）.Jcrop（）
});

---

jsiddle

无法定位

Blob URL

是否被撤销或在何处被撤销，但可以通过创建

元素，使用

.toDataURL（）

并在调用

.Jcrop（）

之前将

的
src
替换为现有图像的
数据URI
，来创建一个解决方法

$（'.crop image'）。在（'click'，函数（）{
var img=$（'.file预览图像'）；
var canvas=$（“”）[0]；
canvas.width=img[0]。自然宽度；
canvas.height=img[0]。自然高度；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img[0]，0,0）；
var url=canvas.toDataURL（）；
img.attr（“src”，url）.Jcrop（）
});

jsiddle
的
的
src
似乎是一个objectURL，您可以创建一个jsiddle来演示吗？我将尝试解决这个问题。我用控制台中的404错误更新了我的问题。
fileinput
或
jcrop
撤销objectURL吗？对不起，我不明白，撤销是什么意思？看，
的
src
似乎是一个objectURL，你能创建一个jsfiddle来演示吗？我将尝试解决这个问题。我用控制台中的404错误更新了我的问题。是
fileinput
还是
jcrop
撤销objectURL？对不起，我不明白，撤销是什么意思？请参阅，
 $('.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()
 });