Aviary 图像编辑器在第二张图像上失败

Question

我正在将 aviary 链接到文件管理器以编辑文件存储中的图像。

一旦用户点击它，我就会将图像打开到模态窗口中，在打开模态窗口之前更新图像的 src 属性

在模态窗口中有一个在 aviary 中编辑的按钮，它打开 aviary，加载图像。

如果我单击 thumb1 然后编辑图像，一切都会按预期工作。然后我在编辑 thumb2 时遇到问题。

它在模态窗口中打开正确的图像，然后按预期正确打开 aviary 中的图像。但是 - 在加载 aviary 窗口时初始调整大小时出现问题。

最初显示临时图像，然后在此图像后面调整大小（出现较大的图像）。临时图像保留在屏幕上，然后鸟舍中断。

在新加载时，一切都按预期工作，但在第二次加载时就不行了。

我在控制台日志中看到的错误是：

Uncaught TypeError: Cannot call method 'isUsingHiResDimensions' of undefined 

有没有办法，一旦我关闭第一张图片上的模态以清除 aviary 的任何设置，下次再重新开始？

我正在用这个函数调用 aviary：

$(document).ready(function() {
    $('.thumbnail').click(function(event) {
        var imagePreview = $('#image1');
        imagePreview.attr('src',$(this).attr('href'));
        $('#editImageLink').click(function(event) {
            return launchEditor('image1', imagePreview.attr('src'));
        });
        $('#imagePreview').modal('show');
        return false;
    });
});

我的鸟舍初始化在这里：

var featherEditor = new Aviary.Feather({
    apiKey: 'mycode',
    apiVersion: 3,
    theme: 'dark', // Check out our new 'light' and 'dark' themes!
    tools: 'all',
    appendTo: '',
    onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
    },
    onError: function(errorObj) {
        alert(errorObj.message);
    }
});
function launchEditor(id, src) {
    featherEditor.launch({
        image: id,
        url: src
    });
    return false;
}

不知道除了刷新页面之外我需要做什么来清除并重新开始，感谢任何帮助。

Answer 1

您将越来越多的点击事件绑定到editImageLink，因此那里的代码运行不止一次。

正确的绑定是：

$(document).ready(function() {
    var imagePreview = $('#image1');

    $('.thumbnail').click(function(event) {
        imagePreview.attr('src',$(this).attr('href'));
        $('#imagePreview').modal('show');
        return false;
    });

    $('#editImageLink').click(function(event) {
        return launchEditor('image1', imagePreview.attr('src'));
    });
});