ClippingMagic.js は、Clipping Magic エディターをお客様ウェブサイトに便利に統合します。 1 枚の画像をフロントページで編集したり、バルククリッピングのように一連の画像を編集したりすることができます。
まず、クイックスタートをお読みください。
サーバー API を使用して画像をアップロードします。
以下に示すように、ホワイトラベルスマートエディターを組み込みます。
人間のオペレーターが画像をクリップする際に、例えば新たに入手可能となった結果をダウンロードするようバックエンドに指示するなどにより、コードによって受信したコールバックに対応します。
この統合オプションでは、完全なコントロールが得られますが、より深いフロントエンド統合が必要になります。 より簡単な統合オプションが望ましい場合は、ホステッドスマートエディターを参照してください。
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 枚の画像用に表示することができます。
ClippingMagic.edit({
"image" : {
"id" : 2346,
"secret" : "image_secret1"
},
"useStickySettings" : true,
"hideBottomToolbar" : false,
"locale" : "ja-JP"
}, myCallback);
コールバック関数は、result-generated または editor-exit のいずれか（両方ではなく）で呼び出されます。 いずれもエディターが閉じたことを示します。
工場出荷時のデフォルト設定を使用するには、useStickySettings を省略するか、false を渡してください。
この呼び出しは、DOM を参照するので ドキュメントレディイベント後にしてください。
エディターは、以下のように複数の画像を編集するよう表示することができます。
ClippingMagic.edit({
"images" : [ {
"id" : 2346,
"secret" : "image_secret1"
}, {
"id" : 2347,
"secret" : "image_secret2"
} ],
"useStickySettings" : true,
"hideBottomToolbar" : false,
"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" : 2346,
"secret" : "image_secret1"
}
});
ClippingMagic.initialize(opts) -> array_of_missing_features
initialize 関数は、初期化を設定するキー/値ペアを含む PlainObject を取ります。
|
apiId
必須 |
API Id。 |
関数は、現在のブラウザーでは欠如しているがエディターを実行するには必要な機能を説明するストリングを含む JavaScript 配列を返します。 この配列が空の場合、edit 関数を呼び出すことができます。
ClippingMagic.edit(opts, callback)
edit 関数は、以下のパラメータを取ります。
| opts |
必須 初期化を設定するキー/値ペアを含む PlainObject：
|
||||||||||||||||||||||||||||||||||||||||||||||
| callback |
必須 詳細については、上記のコールバックの項を参照してください。 |
このメソッドは値を返しません。 このメソッド呼び出しの前に、initialize が呼び出されていない場合、または initialize が空でない配列を返した場合、あるいはエディターウィンドウがすでに開いている場合、例外が発生します。