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

Question

深夜，在我的束缚结束时：

合并 Creative SDK 以编辑通过工作流中的上一页上传到服务器的照片 -

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

Plugin Initialises (onLoad -> Ok)

Image loads (onReady -> Ok)

The Wait icon spins, then

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 - nada 使用相对和绝对 URL 加载图像。

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

我想继续使用这个编辑器进行实时图像编辑，但只需要它来裁剪、调整亮度、对比度、旋转等，目前它正在工作，但是 'blind' - 任何人都来穿过这个？我该如何解决...？ :)

这是源代码，几乎与文档中指定的一样，但是在 '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;

这导致图像编辑器中的图像实际上从视图中消失，因为它是一个 canvas 元素。

修复

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

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

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

Creative SDK Image Editor (Web) loads image, waits, then image disappears (no live preview)

javascript

adobe

image

adobecreativesdk

问题

修复