White Label Smart Editor

Integration Steps

Be sure to read the Quick Start first.

1. Upload an image using the Server API.

2. Embed the White Label Smart Editor as described below.

3. React to the callbacks received by your code as your Human Operator clips the images, e.g. by instructing your backend to download the newly available results.

This integration option gives you complete control, but requires a deeper front-end integration. If you want a simpler integration option, then please see the Hosted Smart Editor.

Setup

To use ClippingMagic.js, start by including and initializing it on the pages where you want to allow editing:

<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript"></script>
<script type="text/javascript">
  function myCallback(opts) {
    // TODO: Replace this with your own functionality
    switch (opts.event) {
      case "error":
          alert("An error occurred: " + opts.error.status + ", " + opts.error.code + ", " + opts.error.message);
          break;

      case "result-generated":
          alert("Generated a result for " + opts.image.id + ", " + opts.image.secret);
          break;

      case "editor-exit":
          alert("The editor dialog closed");
          break;
    }
  }
  var errorsArray = ClippingMagic.initialize({apiId: 123});
  if (errorsArray.length > 0) alert("Sorry, your browser is missing some required features: \n\n " + errorsArray.join("\n "));
</script>

Edit A Single Image

You can display the editor for a single image like so:

ClippingMagic.edit({
    "image" : {
      "id" : 2346,
      "secret" : "image_secret1"
    },
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "en-US"
  }, myCallback);

The callback function will get called with either result-generated or editor-exit, but not both. Each indicates that the editor has been closed.

Omit or pass in false for useStickySettings to use factory default settings.

Be sure to make this call after the document ready event since it references the DOM.

Edit Multiple Images In Sequence

You can display the editor for editing multiple images like so:

ClippingMagic.edit({
    "images" : [ {
      "id" : 2346,
      "secret" : "image_secret1"
    }, {
      "id" : 2347,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "en-US"
  }, myCallback);

The callback function will get called with result-generated once for each result produced by the user (= once per click on 'Done'). There will be one editor-exit call at the end indicating that the editor has been closed, either by the user clicking the X, or by running out of images to edit. There is no callback for when the user skips an image.

Omit or pass in false for useStickySettings to use factory default settings.

Be sure to make this call after the document ready event since it references the DOM.

Callback function(opts)

The edit function takes a callback function as a parameter. This callback allows you to respond to user actions and notify your backend server about image editing progress.

The signature of the callback is function(opts) and any exceptions or values returned are ignored. The opts parameter is a PlainObject containing:

As soon as the editor has been closed you can call edit() again (calls made prior to that lead to an exception).

callback({
  "event" : "result-generated",
  "image" : {
    "id" : 2346,
    "secret" : "image_secret1"
  }
}); 

Function Definitions

ClippingMagic.initialize(opts) -> array_of_missing_features

The initialize function takes a PlainObject containing key/value pairs that configure the initialization:

The function returns a JavaScript Array with strings describing the features that are missing in the current browser, but required to run the editor. If this array is empty, you can go ahead and call the edit function.

ClippingMagic.edit(opts, callback)

The edit function takes the following parameters:

This method does not return a value. If initialize has not been called before calling this method, or if initialize returned a non-empty array, or if an editor window is already open, then an exception is thrown.