重置croppie - jQuery 图像裁剪插件

Question

我正在使用 jQuery Croppie 插件来处理我正在开发的应用程序，但遇到了问题。 我正在使用上传功能来允许用户上传要裁剪的图像。 以防万一用户选择了他们不满意的图像，我想要一种方法让他们删除图像并选择新图像。

但似乎没有一个简单的方法可以做到这一点。 Croppie 文档非常有限，我只能找到 2 个可能的解决方案。 两者我都无法上班：

1. 调用

   destroy()

   函数 - 不幸的是，这会删除 Croppie 添加的所有标记以使脚本正常工作。 一旦它被破坏，我看不到重新初始化它的方法。

2. 使用内置的

   bind

   函数将 url 属性设置为空值 - 这是croppie github 页面上的建议。 它确实删除了图像，但不允许用户选择新图像。 用户可以单击上传框并选择图像文件，但一旦单击打开，图像就不会放入裁剪区域。 脚本似乎停止了 readFile 函数的工作，但没有抛出任何控制台错误。

这是我现在使用的脚本，它允许您选择图像、删除图像，但它不会让您选择新图像：

https://jsfiddle.net/austin350s10/y7yby06b/

如果有人知道如何让它按照我想要的方式工作，我将不胜感激！

Answer 1

你的代码对我有帮助。非常感谢。

https://jsfiddle.net/y7yby06b/8/

$(".reset").click(function() {
    $('.upload-demo').removeClass('ready');
    $("#upload-demo").html("");
    $uploadCrop=null;

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 146,
            height: 146,
            type: 'square'
        },
        boundary: {
            width: 300,
            height: 300
        },
    });
});

此外：

 $(".reset").trigger("click");

Answer 2

我原来帖子中的解决方案 2 运行得很好。 问题是我试图在删除后选择相同的图像。 由于文件输入仍然引用原始图像，因此输入更改事件从未触发。 一旦我选择不同的图像，一切都会正常。

Answer 3

因此，正如您在自己的答案中所建议的那样，您所需要的只是重置功能代码中的这一行

$('#upload').val('');

。

$(".reset").click(function () {
    $('.upload-demo').removeClass('ready');
    $('#upload').val(''); // this will clear the input val.
    $uploadCrop.croppie('bind', {
        url : ''
    }).then(function () {
        console.log('reset complete');
    });
});

之后您可以再次上传相同的图像。

Answer 4

我也为此苦苦挣扎，最终制定了一个工作代码。 “关键”是删除“croppie-container”类。

<div>
    <input type="file" name="upload_image" id="upload_image" hidden/>
    <div id="image_demo" style="height:200px;width:200px;background-color:gray" ready="yes">
        <span>Click to pick image</span>
    </div>
    <button id="upload" hidden>UPLOAD</button>
    <button id="change" hidden>CHANGE</button>
 </div>


<script>  
$(document).ready(function(){    
 
$('#image_demo,#change').on('click',function(e){
    if(e.target.id=='change')
        $('#image_demo').attr('ready','yes');
    if($('#image_demo').attr('ready')=='yes')
        $('#upload_image').trigger('click');
    }   
);

  $('#upload_image').on('change', function(){
    $('#image_demo').removeAttr('ready');
    $('#image_demo').empty();
    $('#upload').prop('hidden',false);
    $('#change').prop('hidden',false);
    $('#image_demo').removeClass('croppie-container');
    $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
        width:225,
        height:225,
        type:'circle'
        },
        boundary:{
        width:300,
        height:300
        }
    });
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }); 
    }
  });
  $('#upload').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"ajax.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
        $('#image_demo').html(data);
        $('#image_demo').attr('ready','yes');
        $('#image_demo').removeClass('croppie-container');
        $('#upload').prop('hidden',true);
        $('#change').prop('hidden',true);
        }
      });
    })
  });
});  
</script>