API Quick Start

Available quick starts:

  1. Auto Clip
  2. Hosted Editor
  3. White Label Editor

Auto Clip

Upload an image and get a clipped result back:

$ curl https://clippingmagic.com/api/v1/images \
 -u 123:[secret] \
 -F 'image=@example.jpeg' \
 -F 'format=result' \
 -F 'test=true' -o clipped.png
# Requires "requests" to be installed (see python-requests.org)
import requests

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    files={'image': open('example.jpeg', 'rb')},
    data={
        'format': 'result',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    # Store these if you want to be able to use the Smart Editor
    image_id = response.headers['x-amz-meta-id']
    image_secret = response.headers['x-amz-meta-secret']

    with open('clipped.png', 'wb') as out:
        out.write(response.content)
else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    image: fs.createReadStream('example.jpeg'), // TODO: Replace with your image
    format: 'result',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
  followAllRedirects: true,
  encoding: null
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    // Store these if you want to be able to use the Smart Editor
    let imageId = response.caseless.get('x-amz-meta-id');
    let imageSecret = response.caseless.get('x-amz-meta-secret');

    // Save result
    fs.writeFileSync("clipped.png", body);
  }
});
$ curl https://clippingmagic.com/api/v1/images \
 -u 123:[secret] \
 -F 'image.url=https://example.com/example.jpeg' \
 -F 'format=result' \
 -F 'test=true' -o clipped.png
# Requires "requests" to be installed (see python-requests.org)
import requests

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    data={
        'image.url': 'https://example.com/example.jpeg',
        'format': 'result',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    # Store these if you want to be able to use the Smart Editor
    image_id = response.headers['x-amz-meta-id']
    image_secret = response.headers['x-amz-meta-secret']

    with open('clipped.png', 'wb') as out:
        out.write(response.content)
else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    'image.url': 'https://example.com/example.jpeg', // TODO: Replace with your image
    format: 'result',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
  followAllRedirects: true,
  encoding: null
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    // Store these if you want to be able to use the Smart Editor
    let imageId = response.caseless.get('x-amz-meta-id');
    let imageSecret = response.caseless.get('x-amz-meta-secret');

    // Save result
    fs.writeFileSync("clipped.png", body);
  }
});

There are many more upload configuration options giving you complete control over how your image is processed.

If you save the id and secret you can still use the Hosted or White Label Editor after reviewing the result.

Your Server Image Background Removed CM API

Hosted Editor

Theory of operation:

  1. Upload an image and get an id and secret identifying the image.

  2. Create a Return URL endpoint on your site for your human operator to return to when they're done.

  3. Use the id, secret and Return URL to compose a Hosted Editor URL for your human operator to clip the image.

  4. Your human operator navigates to the Hosted Editor URL and clips the image.

  5. When your human operator is done their browser issues an HTTP POST to your Return URL. Parse the clippingMagicJson parameter and download the newly available results.

Upload an image and create a Hosted Editor URL

# Requires "requests" to be installed (see python-requests.org)
import requests
import json
from urllib.parse import quote # Python 3, urllib.quote for Python 2

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    files={'image': open('example.jpeg', 'rb')},
    data={
        'format': 'json',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    r = json.loads(response.content)

    # TODO: Store these
    imageId = r["image"]["id"];
    imageSecret = r["image"]["secret"];
    print("Result", r, imageId, imageSecret);

    # Create Hosted Editor URL
    returnUrl = 'https://clippingmagic.com/api/returnUrlExample' # TODO: Replace with your own
    hostedEditorUrl = 'https://clippingmagic.com/api/v1/hosted/123' + \
      '?images=' + str(imageId) + ':' + imageSecret + \
      '&returnUrl=' + quote(returnUrl)
    print("Hosted Editor URL", hostedEditorUrl)

else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    image: fs.createReadStream('example.jpeg'), // TODO: Replace with your image
    format: 'json',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    let r = JSON.parse(body);

    // TODO: Store these
    let imageId = r.image.id;
    let imageSecret = r.image.secret;
    console.log("Result", r, imageId, imageSecret);

    // Create Hosted Editor URL
    let returnUrl = 'https://clippingmagic.com/api/returnUrlExample'; // TODO: Replace with your own
    let hostedEditorUrl = 'https://clippingmagic.com/api/v1/hosted/123' +
      '?images=' + imageId + ':' + imageSecret +
      '&returnUrl=' + encodeURIComponent(returnUrl);
    console.log("Hosted Editor URL", hostedEditorUrl);

  }
});
# Requires "requests" to be installed (see python-requests.org)
import requests
import json
from urllib.parse import quote # Python 3, urllib.quote for Python 2

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    data={
        'image.url': 'https://example.com/example.jpeg',
        'format': 'json',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    r = json.loads(response.content)

    # TODO: Store these
    imageId = r["image"]["id"];
    imageSecret = r["image"]["secret"];
    print("Result", r, imageId, imageSecret);

    # Create Hosted Editor URL
    returnUrl = 'https://clippingmagic.com/api/returnUrlExample' # TODO: Replace with your own
    hostedEditorUrl = 'https://clippingmagic.com/api/v1/hosted/123' + \
      '?images=' + str(imageId) + ':' + imageSecret + \
      '&returnUrl=' + quote(returnUrl)
    print("Hosted Editor URL", hostedEditorUrl)

else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    'image.url': 'https://example.com/example.jpeg', // TODO: Replace with your image
    format: 'json',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    let r = JSON.parse(body);

    // TODO: Store these
    let imageId = r.image.id;
    let imageSecret = r.image.secret;
    console.log("Result", r, imageId, imageSecret);

    // Create Hosted Editor URL
    let returnUrl = 'https://clippingmagic.com/api/returnUrlExample'; // TODO: Replace with your own
    let hostedEditorUrl = 'https://clippingmagic.com/api/v1/hosted/123' +
      '?images=' + imageId + ':' + imageSecret +
      '&returnUrl=' + encodeURIComponent(returnUrl);
    console.log("Hosted Editor URL", hostedEditorUrl);

  }
});

There are many more upload configuration options giving you complete control over how your image is processed.

See the full Hosted Editor documentation for more in-depth information.

Your Server Image JSON id + secret CM API Clip Image POST Return URL Hosted Editor URL Fetch Image Background Removed Human Operator clippingmagic.com

Create a Return URL handler

When your human operator is done their browser issues an HTTP POST to your Return URL. Parse the clippingMagicJson parameter and download the newly available results.

from flask import Flask, request
import requests
import json

app = Flask(__name__)

@app.route('/cmReturnUrl', methods=['POST'])
def cmReturnUrl():
    cm = json.loads(request.form['clippingMagicJson'])
    if cm["event"] == 'editor-exit':
        for im in cm["clipped"]:
            response = requests.get('https://clippingmagic.com/api/v1/images/' + str(im["id"]), headers={
                'Authorization': 'Basic MTIzOltzZWNyZXRd'})
            if response.status_code == requests.codes.ok:
                with open('clipped-' + str(im["id"]) + '.png', 'wb') as out:
                    out.write(response.content)
            else:
                print("Error " + str(im["id"]) + ": ", response.status_code, response.text)
        # TODO: Handle cm["skipped"] images
    elif cm["event"] == 'error':
        print("Error: ", cm["error"]["code"], cm["error"]["message"])
    return ''
// Using the ExpressJS framework:
var express = require('express');
var bodyParser = require('body-parser');
var request = require('request');
var fs = require('fs');
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
var port = process.env.PORT || 8080;

app.post('/cmReturnUrl', function(req, res) {
    let cm = JSON.parse(req.body.clippingMagicJson);
    switch (cm.event) {
      case "editor-exit":
        for (let im of cm.clipped) {
          request.get({
            url: 'https://clippingmagic.com/api/v1/images/' + im.id,
            auth: {user: '123', pass: '[secret]'},
            encoding: null,
          }, function(error, response, body) {
            if (error) {
              console.error('Request failed:', error);
            } else if (!response || response.statusCode != 200) {
              console.error('Error:', response && response.statusCode, body.toString('utf8'));
            } else {
              // Save result
              fs.writeFileSync("clipped-" + im.id + ".png", body);
            }
          });
        }
        // TODO: Handle cm.skipped images
        break;

      case "error":
        console.error("Error: ", cm.error.code, cm.error.message);
        break;
    }
    res.send(""); // Response is ignored
});

app.listen(port); // start the server
console.log('Server started! At http://localhost:' + port);

See the full documentation for the Return URL.

See the full documentation for the Download Server API.

Success Example clippingMagicJson decodes to:
{
  "event" : "editor-exit",
  "images" : [ {
    "id" : 2345,
    "secret" : "image_secret"
  } ],
  "clipped" : [ {
    "id" : 2345,
    "secret" : "image_secret"
  } ],
  "skipped" : [ ]
}
Test your Return URL
Error Example clippingMagicJson decodes to:
{
  "event" : "error",
  "error" : {
    "status" : 400,
    "code" : 1234,
    "message" : "Example error"
  },
  "images" : [ {
    "id" : 2345,
    "secret" : "image_secret"
  } ],
  "clipped" : [ ],
  "skipped" : [ {
    "id" : 2345,
    "secret" : "image_secret"
  } ]
}
Test your Return URL

White Label Editor

Theory of operation:

  1. Upload an image and get an id and secret identifying the image.

  2. Embed the White Label Editor on your web page where your human operator can clip the image.

  3. Use the callback to get information about the clipping progress and download new results.

Upload an image

# Requires "requests" to be installed (see python-requests.org)
import requests
import json

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    files={'image': open('example.jpeg', 'rb')},
    data={
        'format': 'json',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    r = json.loads(response.content)

    # TODO: Store these
    imageId = r["image"]["id"];
    imageSecret = r["image"]["secret"];
    print("Result", r, imageId, imageSecret);
else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    image: fs.createReadStream('example.jpeg'), // TODO: Replace with your image
    format: 'json',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    let r = JSON.parse(body);

    // TODO: Store these
    let imageId = r.image.id;
    let imageSecret = r.image.secret;
    console.log("Result", r, imageId, imageSecret);
  }
});
# Requires "requests" to be installed (see python-requests.org)
import requests
import json

response = requests.post(
    'https://clippingmagic.com/api/v1/images',
    data={
        'image.url': 'https://example.com/example.jpeg',
        'format': 'json',
        'test': 'true' # TODO: Remove for production
        # TODO: Add more upload options here
    },
    headers={
        'Authorization':
        'Basic MTIzOltzZWNyZXRd'
    },
)
if response.status_code == requests.codes.ok:
    r = json.loads(response.content)

    # TODO: Store these
    imageId = r["image"]["id"];
    imageSecret = r["image"]["secret"];
    print("Result", r, imageId, imageSecret);
else:
    print("Error:", response.status_code, response.text)
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://clippingmagic.com/api/v1/images',
  formData: {
    'image.url': 'https://example.com/example.jpeg', // TODO: Replace with your image
    format: 'json',
    test: 'true', // TODO: Remove for production
    // TODO: Add more upload options here
  },
  auth: {user: '123', pass: '[secret]'},
}, function(error, response, body) {
  if (error) {
    console.error('Request failed:', error);
  } else if (!response || response.statusCode != 200) {
    console.error('Error:', response && response.statusCode, body.toString('utf8'));
  } else {
    let r = JSON.parse(body);

    // TODO: Store these
    let imageId = r.image.id;
    let imageSecret = r.image.secret;
    console.log("Result", r, imageId, imageSecret);
  }
});

There are many more upload configuration options giving you complete control over how your image is processed.

Embed the White Label Editor

Call ClippingMagic.js on your web page, replacing the hardcoded id and secret with the values you got from the upload:

<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 "));
  else ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "useStickySettings" : true,
    "locale" : "en-US"
  }, myCallback);
</script>

You can then download the newly available results by using the Download Server API.

See the full documentation for White Label Editor.

App Image JSON id + secret Human Operator CM API Clip Image App Specific (up to integration) callback() ClippingMagic.js yoursite.com Background Removed Fetch Image