Javascript jqueryjcrop插件多次加载图像

我遇到了jquery Jcrop插件的问题

我使用它来允许用户裁剪图像，但当他/她对此不满意时，我会重置原始图像

我使用PHP存储原始图像，并对图像进行裁剪

当用户点击重置按钮时，原始图像从服务器加载，并重新应用

jcrop

但是亲爱的朋友们，我的问题是当用户点击“重置图像”按钮时，裁剪的图像和原始图像都会显示出来。Jcrop创建了一个没有id或类的新标记，当我销毁

Jcrop

时，它不会删除

下面是我的重置按钮代码

    $("#reset_crop").click(function(){
    refreshImg($("#profpic"), "files/"+fileName); 

/* refreshImg函数在图像url的末尾添加date at date（），以忽略缓存。并将src attr更改为原始文件名。 */

我的Jcrop设置是

function createJcrop(){


return  $.Jcrop("#profpic",{
            boxWidth:345,
            trueSize:[width, height],
            width:345,
            onSelect: showCoords,
            onChange: showCoords
        });
}

裁剪按钮的功能是

    $("#crop").click(function(){
    jcrop.release();
    var newfile;
        jcrop.destroy();
        $.ajax({
        url:'crop.php',
        async:false,
        data:{fileName:fileName,width:coordinates[0],height:coordinates[1],x:coordinates[2],y:coordinates[3]},
        success:function(data){
                //console.log(data);
                    newfile = data;
            },
        error:function(){

                alert("something went wrong");
            }
    });

    refreshImg($("#profpic"), "files/"+newfile);
    $("#reset_crop").removeAttr('disabled');

$(this).attr("disabled","disabled");

});

---

重新绑定映像时，可以使用jcrop.setImage（您的_映像）；因此，插件将相应地更改图像（我想不是发布/销毁，但它必须经过测试），谢谢@irvindomininakadeward，我按照你的建议做了。我删除了所有释放和销毁呼叫。使用了setImage（），但它仍然加载多个图像。当我裁剪的次数越多，添加的标记数就越多。事情变得一团糟。

    $("#crop").click(function(){
    jcrop.release();
    var newfile;
        jcrop.destroy();
        $.ajax({
        url:'crop.php',
        async:false,
        data:{fileName:fileName,width:coordinates[0],height:coordinates[1],x:coordinates[2],y:coordinates[3]},
        success:function(data){
                //console.log(data);
                    newfile = data;
            },
        error:function(){

                alert("something went wrong");
            }
    });

    refreshImg($("#profpic"), "files/"+newfile);
    $("#reset_crop").removeAttr('disabled');

$(this).attr("disabled","disabled");

});