Reset croppie - 一个 jQuery 图像裁剪插件

Question

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

但似乎没有一种简单的方法可以做到这一点。 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');
    });
});

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