Reset croppie - jQuery 图像裁剪插件

Question

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

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

调用 destroy() 函数 - 不幸的是，这会删除 croppie 添加的所有标记，以使脚本正常工作。一旦它被销毁，我就看不到重新初始化它的方法。
使用内置的 bind 函数将 url 属性设置为空值 - 这是 croppie github 页面上的建议。它确实删除了图像，但是它不允许用户 select 新图像。用户可以点击上传框并选择一个图像文件，但是一旦他们点击打开图像就不会被放入裁剪区域。似乎脚本停止处理 readFile 函数，但没有抛出任何控制台错误。

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

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

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

Answer 1

我原来 post 中的解决方案 2 工作正常。问题是我在删除它后试图 select 相同的图像。由于文件输入仍然具有对原始图像的引用，因此输入更改事件从未触发。只要我 select 一个不同的图像一切正常。

Answer 2

因此，正如您在自己的回答中所建议的那样，您只需要在重置功能的代码中添加这一行 $('#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 3

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

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");

Reset croppie - jQuery 图像裁剪插件

Reset croppie - a jQuery image cropping plugin

jquery

image

crop

reset

readfile