CODEWITHSUNDEEP
javascriptimageadobeadobecreativesdk
big_lion
big_lion

Reputation: 23

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

late night here and at the end of my tether:

Incorporating Creative SDK to edit photos that were uploaded to the server via the previous page in the workflow -

I have tried every one of the parameters on the SDK documentation to find where is the fault in keeping the loaded image active for previewing edits, but in sequence,

  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).

My webspace is covered with an SSL certificate, but tried loading the image with relative and absoulte URLs, via http and https - nada.

I am calling version 3 as per the documentation, but people have said try version 4.3.1.29..?

I would like to presevere with this editor for live image editing, but only need it for cropping, adjusting brightness, contrast, rotation etc. and at the moment it is working, but 'blind' - anyone come across this? And how do I fix it...? :)

This is the source, pretty much as specified in the documentation, but with a working AJaX call while 'onSave()':

<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>

The function is kicked off from a form button:

<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>

Upvotes: 2

Views: 466

Answers (1)

Ash Ryan Arnwine
Ash Ryan Arnwine

Reputation: 1481

It turns out that this is an issue in your CSS, and should be a fairly simple fix.

The issue

In daFooz_main.css, you have a canvas selector that includes:

z-index: -1;

That's causing the image in the Image Editor to effectively disappear from view since it is a canvas element.

The fix

The fix could be as simple as removing the line above from your CSS.

If you need that line for other areas of your site, try finding a way to be more specific with your selector, perhaps by using classes to target canvas elements that you do want to alter the z-index of.

Upvotes: 1

Related Questions