Question

在我的rails应用程序中，我正在使用jcrop和krajee的bootstrap-fileinput。我将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);
  }

以下是文件输入创建的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 (not found)

我不确定还包括哪些内容。我没有提供表单，因为我还没有尝试提交表单。我只是遇到了jcrop在预览img上工作的问题。

这是jsfiddle （我很难实现上述所有代码，但这基本上就是发生了什么）

Answer 1

无法找到Blob URL是否被撤销，但是能够通过创建<canvas>元素，使用.toDataURL()并替换src来创建解决方法{1}}在调用.file-preview-image

之前使用data URI现有图片

.Jcrop()

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

使用Jcrop和文件输入在上传之前裁剪图像

1 个答案: