Aviary (Abode Creative SDK) and local development

Question

I'm stuck trying to edit photo from localhost. I try encoding my photo in base64 but it still fail.

Considering Aviary.Feather is intialized and works fines in production, here is a sample of my code :

var success = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.....";
$("#imageEditor").attr("data-id", id);
$("#imageEditor").attr("src", success);
imageEditor.launch({
    image: "imageEditor",
    url: success,
    hiresUrl: success
});

It returns the error :

ERROR_SAVING_HI_RES:{code:18,message:"There was a problem saving your photo."}

Dipak · Answer 1 · 2018-02-27T04:58:44.033

This is how I have setup the Aviary Image editor plugin in my local environment:

<!DOCTYPE html>
<html>
  <head>
    <title>Image Editor2</title>
  </head>
  <body>
    <!-- Load widget code -->
    <script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
    <!-- Instantiate the widget -->
    <script type="text/javascript">

      var featherEditor = new Aviary.Feather({
        apiKey: '1234567',
        apiVersion: 3,
        tools: ['draw', 'stickers'],
        onSave: function(imageID, newURL) {
          var img = document.getElementById(imageID);
          img.src = newURL;
        }
      });

      function launchEditor(id, src) {
        featherEditor.launch({
          image: id,
          url: src
        });
        return false;
      }
    </script>                         

    <!-- Add an edit button, passing the HTML id of the image
    and the public URL to the image -->
    <a href="#" onclick="return launchEditor('editableimage1','/goat.jpg');">Edit!</a>
    <!-- original line of HTML here: -->
    <img id="editableimage1" src="http://example.com/public/images/goat.jpg"/>
  </body>
</html>

Reference

https://developers.aviary.com/docs/web/setup-guide#constructor-config-tools

Aviary (Abode Creative SDK) and local development

1 Answers1

Reference