ホワイトラベルスマートエディター

ClippingMagic.js は、Clipping Magic エディターをお客様ウェブサイトに便利に統合します。 1 枚の画像をフロントページで編集したり、バルククリッピングのように一連の画像を編集したりすることができます。

統合手順

まず、クイックスタートをお読みください。

  1. サーバー API を使用して画像をアップロードします。

  2. 以下に示すように、ホワイトラベルスマートエディターを組み込みます。

  3. 人間のオペレーターが画像をクリップする際に、例えば新たに入手可能となった結果をダウンロードするようバックエンドに指示するなどにより、コードによって受信したコールバックに対応します。

この統合オプションでは、完全なコントロールが得られますが、より深いフロントエンド統合が必要になります。 より簡単な統合オプションが望ましい場合は、ホステッドスマートエディターを参照してください。

設定

ClippingMagic.js を使用するには、編集を行おうとするページで ClippingMagic.js を含めて初期化し、起動します。

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

1 枚の画像の編集

エディターは、以下のように 1 枚の画像用に表示することができます。

ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "useStickySettings" : true,
    "locale" : "ja-JP"
  }, myCallback);

コールバック関数は、result-generated または editor-exit のいずれか(両方ではなく)で呼び出されます。 いずれもエディターが閉じたことを示します。

工場出荷時のデフォルト設定を使用するには、useStickySettings を省略するか、false を渡してください。

この呼び出しは、DOM を参照するので ドキュメントレディイベントにしてください。


連続的に複数の画像を編集

エディターは、以下のように複数の画像を編集するよう表示することができます。

ClippingMagic.edit({
    "images" : [ {
      "id" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "locale" : "ja-JP"
  }, myCallback);

コールバック関数は、ユーザーが生成する結果ごと(「完了」をクリックするごと)に毎回 result-generated で呼び出されます。 終わりに、1 回の editor-exit 呼び出しがあり、ユーザーが X をクリックしたが、編集すべき画像がもうないことによりエディターが終了したことを示します。 ユーザーが画像をスキップしたときにはコールバックはありません。

工場出荷時のデフォルト設定を使用するには、useStickySettings を省略するか、false を渡してください。

この呼び出しは、DOM を参照するので ドキュメントレディイベントにしてください。


コールバック function(opts)

edit 関数は、callback 関数をパラメータとして扱います。 このコールバックによって、ユーザーアクションに対応し、バックエンドサーバーに画像編集の進捗を通知することができます。

コールバックシグネチャは、function(opts) で、例外または返された値は無視されます。 opts パラメータは、PlainObject で、以下が含まれます。

event

今起きたことを示すストリング。以下の表を参照してください。

image オプション。 画像 JSON オブジェクト(id およびシークレットのみが含まれます)。
error オプション。 エラー JSON オブジェクト
イベント画像がありますか?エラーが発生しましたか?意味
result-generatedはいいいえ ユーザーが「完了」をクリックしました。結果は生成され、バックエンド API を使用してただちにダウンロードすることができます。 1 枚の画像モードでは、エディターは終了しています。
editor-exitいいえいいえ ユーザーが右上隅の赤い X をクリックしてエディターを終了させたか、複数画像モードで編集すべき画像がなくなったかです。 エディターは終了しました。
errorいいえはい エラーが発生しました。詳細は、error 値を調べてください。 エディターは終了しました。

エディター終了後ただちに再度 edit() を呼び出すことができます(その前に行った呼び出しは例外となります)。

コールバック呼び出しの例

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

関数の説明

ClippingMagic.initialize(opts) -> array_of_missing_features

initialize 関数は、初期化を設定するキー/値ペアを含む PlainObject を取ります。

apiId
必須
API Id。

関数は、現在のブラウザーでは欠如しているがエディターを実行するには必要な機能を説明するストリングを含む JavaScript 配列を返します。 この配列が空の場合、edit 関数を呼び出すことができます。

ClippingMagic.edit(opts, callback)

edit 関数は、以下のパラメータを取ります。

opts

必須 初期化を設定するキー/値ペアを含む PlainObject

image

オプション。 画像 JSON オブジェクト(id およびシークレットのみが必須です)。

images

オプション。 画像 JSON オブジェクト の配列(id およびシークレットのみが必須です)。

useStickySettings

オプション。 ブール関数の trueは、API ユーザーのスティッキー設定が使用されることを、false または省略は、工場出荷時のデフォルトが使用されることを示します。

これにより、基本クリッピング設定が設定され、編集するすべての画像にわたり適用されます。

Read about how to configure the sticky settings

プリクロップは API では利用できませんが、画像サイズ制限は API アップロードコールで設定できます。

locale

オプション。 エディターで使用する表示言語。省略された場合は、デフォルトで英語になります。有効な値は以下です。

コード表示言語
en-US English (英語)
de-DE Deutsch (ドイツ語)
es-ES Español (スペイン語)
fr-FR Français (フランス語)
hi-IN हिन्दी (ヒンディー語)
id-ID Indonesia (インドネシア語)
it-IT Italiano (イタリア語)
ja-JP 日本語
ko-KR 한국어 (韓国語)
pl-PL Polski (ポーランド語)
pt-BR Português (ポルトガル語)
ru-RU Русский (ロシア語)
th-TH ไทย (タイ語)
tr-TR Türkçe (トルコ語)
vi-VN Tiếng Việt (ベトナム語)
zh-Hans-CN 简体中文 (中国語)
zh-Hant-TW 繁體中文 (中国語)
callback

必須 詳細については、上記のコールバックの項を参照してください。

このメソッドは値を返しません。 このメソッド呼び出しの前に、initialize が呼び出されていない場合、または initialize が空でない配列を返した場合、あるいはエディターウィンドウがすでに開いている場合、例外が発生します。