JavaScript Image Cropper预览

Question

我正在使用cropper.js：https://fengyuanchen.github.io/cropperjs/

然后引用this，我编写了一个获取图像并裁剪图像的代码。

但是，我想更多可能性，预览。

我要显示已裁剪的预览图像。

代码：

$(function() {

  var file_target
  $('#input_file').change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        file_target = e.target.result

        $("#img_crop").attr("src", e.target.result);
        $("#modal_crop").modal("show");
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
  var image;
  var cropper
  $("#modal_crop").on("shown.bs.modal", function() {
    image = document.getElementById('img_crop');
    cropper = new Cropper(image, {
      viewMode: 2,
      minCropBoxWidth: 300,
      minCropBoxHeight: 300,
      aspectRatio: 1 / 1,
    });

  }).on("hidden.bs.modal", function() {
    cropper.destroy();
  });




  var crop_x, crop_y, crop_height, crop_width, crop_rotate
  $(".go_preview").click(function() {
    var cropData = cropper.getData();

    var form_file = $('#form_upload')[0];
    crop_x = cropData["x"]
    crop_y = cropData["y"]
    crop_height = cropData["height"]
    crop_width = cropData["width"]
    crop_rotate = cropData["rotate"]
    $('#modal_crop').modal('hide')
    /*make image cropped and set in img tag*/
    /*need some function, but I don't know how to do it*/
    image = image_that_has_cropped_with_ {
      crop_x,
      crop_y,
      crop_x + crop_height,
      crop_y + crop_width,
      -crop_rotate
    }
    $('#img_selected').attr('src', image.image_some_url)

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here is img tag that is for preview image -->
<img id="img_selected" style="width:300px; height:300px;">

<div class="modal fade" id="modal_crop" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img src="" id="img_crop">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary go_preview">go_preview</button>
      </div>
    </div>
  </div>
</div>
<form class="" method="post" enctype="multipart/form-data" id="form_upload">
  <input type="file" name="file" id="input_file" accept="image/jpeg, image/png" required>
</form>

当我使用python Django时，裁剪图像是用枕头完成的。但是在javascript和HTML中，我不知道如何处理。

只想预览。