Jquery Crop：裁剪图像不改变

Question

我有以下代码：

<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form  action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>

var url = null;
$('#file').on('change',function(){

    var file = this.files[0];

    if(url != null){

        URL.revokeObjectURL(url);

    }

    url = URL.createObjectURL(file);


    startCropper();

});


function startCropper(){

    $('#crop').removeAttr('src');

    $('#crop').attr('src',url);

    $('#crop').cropper({

    viewMode            : 0,

    cropBoxResizable    : false,

    minCropBoxWidth     : 100,

    minCropBoxHeight    : 100,

    dragMode            : 'none',

    preview             : $('#img2'),

    aspectRatio: 1,

    crop : function(e){

        $('#crop_x').val(e.x);

        $('#crop_y').val(e.y);

    }

 });
};
</script>

问题是当我选择一个new文件时，新图像没有显示（旧图像仍然显示在裁剪器中）。

如您所见，我检查了旧网址并将其撤消。当我不在 startCropper() 函数中使用 $("#crop").cropper({...}) 时，它可以工作。

GitHub：https://github.com/fengyuanchen/cropper/tree/v2.3.0

如何强制裁剪器加载新​​图像？

Answer 1

对于cropper JS 1.3.3，在画布绘制之后是cropper.destroy(); 而不是canvas.cropper('destroy')。 `

Answer 2

这段代码将解决Cropper中Image不变化的问题。

HTML

<input id="userImage" type="file" name="userImage" accept="image/*">

<div>
   <canvas id="canvas" style="display: none;">
      Your browser does not support the HTML5 canvas element.
   </canvas>
</div>
<div id="imagePreview" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>

CSS

img {max-width: 100%;} /* This rule is very important, please do not ignore this! */

#canvas {
  height: auto;
  width: 250px; /*Change this value according to your need*/
  background-color: #ffffff;
  cursor: default;
  border: 1px solid #000;
}

JS

var canvas  = $("#canvas");
context = canvas.get(0).getContext("2d");

$('#userImage').on( 'change', function(){
if (this.files && this.files[0]) {
   if ( this.files[0].type.match(/^image\//) ) {
      var reader = new FileReader();
      reader.onload = function(evt) {
      var img = new Image();
      img.onload = function() {
         context.canvas.height = img.height;
         context.canvas.width  = img.width;
         context.drawImage(img, 0, 0);

         // Destroy the old cropper instance
         canvas.cropper('destroy');

         // Replace url
         canvas.attr('src', this.result);

         var cropper = canvas.cropper({
            //these options can be changed or modified according to need
            viewMode: 0,
            cropBoxResizable: false,
            minCropBoxWidth: 100,
            minCropBoxHeight: 100,
            dragMode: 'none',
            preview: $('#imagePreview'),
            aspectRatio: 1,
            crop : function(e){
               $('#crop_x').val(e.x);
               $('#crop_y').val(e.y);
            }
         });
       };
       img.src = evt.target.result;
    };
    reader.readAsDataURL(this.files[0]);
  } else {
    alert("Invalid file type! Please select an image file.");
  }
} else {
  alert('No file(s) selected.');
}
});

欲了解更多详情和更好的理解，请访问

Cropper Official Documentation

Answer 3

你需要打电话

$('#crop').cropper('destroy');

裁剪初始化之前