0

所以我的网站上有一个 aviary 编辑器的实例，它从文件选择器中提取图像，然后重新提交它们。我遇到的问题是，当我加载图像时，它最初会出现我已加载的缩略图，然后屏幕变为空白......直到我调整屏幕大小并且图像正常显示。

这是它的样子，请注意底部的图像尺寸。它们从已加载的缩略图变为空白图像，并显示正确的尺寸，直到我稍微更改窗口大小。

加载时，底部缩略图的尺寸 加载时，底部缩略图的尺寸 加载后，底部尺寸更正 加载后，底部的正确尺寸 稍微改变窗口尺寸后，图像出现 稍微改变窗口尺寸后，图像出现

这是我的初始化代码：

function initEditor( apiKey ){
var tools = ['enhance', 'orientation', 'focus', 'resize', 'crop', 'effects'];
var featherEditor = new Aviary.Feather({
    apiKey: apiKey,
    apiVersion: 3,
    displayImageSize: true,
    tools: tools,
    maxSize: 800,
    theme: 'minimum',
    onSave: function(image, newUrl){
        //onSave function, sends to external filePicker source 
    },
    onError: function(errorObj){
        console.log(errorObj);
    },
    onLoad: function(){
        //load only if there is an img
        if (typeof img !== 'undefined'){
            openEditor(img, src, featherEditor);
        }
    }
});
return featherEditor;
}

开启代码：

image = "img-id_image_relations-0-image"

src = "https://www.filepicker.io/api/file/mX42P6fLRS6YDP58moIH"

function openEditor(image, src, editor){
editor.launch({
    image: image,
    url: src
});
//return false;
}

我尝试过的事情：

  • 在打开之前将图像加载到 div 中，

  • 将羽毛初始化简化到最低限度，

  • 在面向外部的服务器和本地主机上进行测试，

糟糕的是，当我在 jsFiddle 上对其进行测试时，它运行良好。http://jsfiddle.net/TD4Ud/

4

1 回答 1

1

它很脏，但是我找到了在图像加载时触发窗口调整大小事件的临时解决方案。我希望有一个更好的答案，但这将在此期间起作用。

在初始化中将其添加为 onReady 事件：

onReady: function(){
        //this is an abomination but it works
        window.dispatchEvent(new Event('resize'));
    }
于 2014-06-30T18:57:06.163 回答