clipArea.destroy()使用后不能重新创建对象

[sxf359]

我使用的场景是这样得： 打开一个弹出层，然后在这个层内创建插件对象。 当直接创建对象：

new PhotoClip("#clipArea",{
                size: [260, 350], // 截取框的宽和高组成的数组。默认值为[260,260]
                outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
                //outputType: "jpg",    // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
                file: "#selectPhoto", // 上传图片的<input type="file">控件的选择器或者DOM对象
                //view: "#view",        // 显示截取后图像的容器的选择器或者DOM对象
                ok: "#clipSave", // 确认截图按钮的选择器或者DOM对象

这里不写完，因为有点长。第一次点击上传图片没有问题。上传了一张。然后再次点击选择图片，相应的图片上传就成了两张。然后再次点击选择图片上传，就成了四张。通过

 loadStart: function(file) {
                    console.info("start load");
                }

输出值发现，第二次选择上传的时候这个被执行了两次，第三次就执行了4次。我想着或许用你的插件提供的clipArea.destroy()等到上传成功后，销毁创建的对象。然后再次打开弹出层，重新创建这个插件对象能解决此问题。我是这样用的：

$("#popPhoto").popup();
            console.info("pop1");
            var clipArea=new PhotoClip("#clipArea",{
                size: [260, 350], // 截取框的宽和高组成的数组。默认值为[260,260]
                outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
                //outputType: "jpg",    // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
                file: "#selectPhoto", // 上传图片的<input type="file">控件的选择器或者DOM对象
                //view: "#view",        // 显示截取后图像的容器的选择器或者DOM对象
                ok: "#clipSave", // 确认截图按钮的选择器或者DOM对象
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                loadStart: function(file) {
                    console.info("start load");
                },
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                loadComplete: function(dataURL) {
                    console.info("start complete");
                },
                // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
                loadError: function(event) {
                    console.info("load error");
                },
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                clipFinish: function (dataURL, a, b) {
                    console.info("clipFinish");
                    $.post("/wx/WxService/Upload64", { fileName: "", fileCategory: "/images/Activity", imageBuffer: dataURL }, function(data) {
                        page.VM.Photo(data.Content);
                        $("#Photo").val(data.Content);
                        if (data.Code != 0) {
                            //console.info("alert");
                            $.alert(data.Content);
                            return;
                        }
                        //console.info($("#Photo").val());
                        clipArea.destroy();
                        //clipArea = null;
                        $.closePopup();

                    });
                }
            });

第一次打开弹出层，然后选中图片保存，保存完后自动关闭弹出层。然后第二次打开弹出层，选择图片，再次保存图片的时候出现了这个js提示： jquery.photoClip.js:515 Uncaught TypeError: Cannot read property 'offset' of null 这我猜测是因为你的destroy方法销毁了太多东西，导致再次创建的对象有缺失造成。另外我不能确定，你这个多次选择图片，保存的图片成倍增加是不是因为你这个插件的问题。期待你的解决

[baijunjie]

我测试了我的demo，并没有你说的问题。不过我却发现我的 destroy() 少销毁一个事件监听。希望你先测试我提供的demo，再对比你的代码，尽快锁定问题。确保问题清楚后，我会更新我的代码。

[sxf359]

通过对比，并做了下测试。知道问题出在哪里了。你的demo是在页面中直接创建了一个对象。只创建了一次。然后一直在用这个对象。我的是执行了一个函数。这个函数先实现弹出一个层，然后在这个层中创建了photoClip对象。每次执行这个函数都会重新创建这个对象。这就导致我说的哪个问题。第一次点击弹出执行了一次photoclip.第二次是执行了2次，第三次是3次。也就是一旦保存图片。第一次是一张图，第二次会是两张图。第三次是3张。哪个destroy函数确实有问题。一旦使用，再次创建的对象不能用。有错误。谢谢你的答复

[baijunjie]

恩，先确保对象不要重复创建，然后更新到v2.0.5，看看是否还有问题