javascript - Creative SDK Image Editor (Web) 加载图像，等待，然后图像消失(无实时预览)

Question

深夜在这里，在我束缚的尽头:

结合 Creative SDK 来编辑通过工作流中的上一个页面上传到服务器的照片 -

我已经尝试了 SDK 文档中的每一个参数，以找出使加载的图像保持事件状态以进行预览编辑的错误所在，但按顺序进行，

1. Plugin Initialises (onLoad -> Ok)
2. Image loads (onReady -> Ok)
3. The Wait icon spins, then
4. The image disappears from the edit window

onError() does not pick this up.

Edits are functioning, onSave() fires and I can copy the image (sending the adobe URL via AJaX) to a specified location (file output) on my webspace, BUT, no live preview. Also the image does not update the original as is hard-coded in my script, and it gives an error as though unsaved on closing (isDirty).

我的网站空间覆盖有 SSL 证书，但尝试通过 http 和 https 使用相对和绝对 URL 加载图像 - nada。

我根据文档调用版本 3，但人们说尝试版本 4.3.1.29..？

我想继续使用这个编辑器进行实时图像编辑，但只需要它来裁剪、调整亮度、对比度、旋转等，目前它正在工作，但是“盲目”——有人遇到过这个吗？我该如何解决...？ :)

这是源代码，几乎与文档中指定的一样，但是在 'onSave()' 时使用 AJaX 调用:

<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>

    <!-- Instantiate Feather -->
    <script type='text/javascript'>
    var featherEditor = new Aviary.Feather({
        apiKey: 'my-key',
        theme: 'dark', // Check out our new 'light' and 'dark' themes!
        tools: 'all',
        displayImageSize: 'true',
        appendTo: '',
        onSave: function(imageID, newURL) {
            var img = document.getElementById("image1");
            img.src = newURL;
            var ph = document.getElementById("new_image_placeholder_div");
            ph.innerHTML = '<img src="'+img.src+'" height="100">';


    var xmlhttp_c;  
    if (window.XMLHttpRequest){xmlhttp_c=new XMLHttpRequest();} else {
        xmlhttp_c=new ActiveXObject("Microsoft.XMLHTTP");}

            alert("Passing the URL "+newURL+" to the PHP page...");

      xmlhttp_c.open("GET", "feather_save_handler.php?newURL="+encodeURI(newURL), true);

    xmlhttp_c.onreadystatechange=function() { if (xmlhttp_c.readyState==4 && xmlhttp_c.status==200) {

            alert(xmlhttp_c.responseText);      
            alert("Saved!");

            } else { 
                    }
             } 

    xmlhttp_c.send();
    // end save AJaX call..

        },
        onError: function(errorObj) {
            alert(errorObj.args);
        }
    });
    function launchEditor(id, src) {

        featherEditor.launch({
            image: id,
            url: src
        });
        return false;
    }

    </script>

该功能是从表单按钮启动的:

<form name="feather_editor" onSubmit="no_submit();">
<input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://mywebsitename.com/image_name.jpg');" >
</form>

Answer 1

事实证明这是您的 CSS 中的一个问题，应该是一个相当简单的修复。

问题

在 daFooz_main.css 中，您有一个 canvas 选择器，其中包括:

z-index: -1;

这导致图像编辑器中的图像有效地从 View 中消失，因为它是一个 canvas 元素。

修复

解决方法很简单，只需从您的 CSS 中删除上述行即可。

如果您的站点的其他区域需要该行，请尝试找到一种使您的选择器更具体的方法，也许可以使用类来定位您确实想要更改 canvas 的元素 z-index of.