ClippingMagic.js 允許您方便地將 Clipping Magic 編輯器與您的網站相整合。 您可以和在首頁一樣編輯單個圖像，或者和在大量剪裁中一樣循序編輯圖像。
請務必首先閲讀快速啟動。
使用伺服器 API 上傳一個圖像。
如下所述，嵌入白標智慧編輯器。
對真人操作者剪輯圖像時您的代碼收到的回呼作出回應，例如，透過指示您的後端下載最新可用的結果。
此整合選項爲您提供完全控制，但需要更加深入的前端整合。 如果您想要一個更加簡單的整合選項，請查看托管智慧編輯器。
如欲使用 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>
您可以如此為單個圖像顯示編輯器：
ClippingMagic.edit({
"image" : {
"id" : 2346,
"secret" : "image_secret1"
},
"useStickySettings" : true,
"hideBottomToolbar" : false,
"locale" : "zh-Hant-TW"
}, 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" : "zh-Hant-TW"
}, myCallback);
回呼功能將收到來自result-generated的針對使用者產生的每一個結果的一次呼叫（= 每點選「完成」一次，即呼叫一次）。 結束時會有一次editor-exit呼叫，表示由於使用者點選了 X 或者需要編輯的圖像已用完，編輯器已關閉。 使用者跳過一個圖像時，不會有回呼。
為useStickySettings省略或傳入false，以使用原廠預設值。
請確保在文件就緒事件後進行此次呼叫，因爲它會參照 DOM。
function(opts)
edit功能將callback功能視作一個函數。 此回呼允許您回應使用者動作，並向您的後端伺服器發送圖像編輯進度通知。
回呼簽章是function(opts)，並且所有例外和所傳回之值均將予忽略。 opts參數是包含以下内容的PlainObject：
| event |
表示剛剛發生情況的字串，請參見下表。 |
| image | 可選。 圖像 JSON 物件（僅包含 ID 和密碼）。 |
| error | 可選。 一個錯誤 JSON 物件。 |
| 事件 | 有圖像？ | 有錯誤？ | 含義 |
|---|---|---|---|
| result-generated | 是 | 否 | 使用者已點選「完成」，結果已經產生，並可使用後端 API 立即下載。 在單圖像模式中，編輯器已關閉。 |
| 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傳回一個非空白陣列，或者已有打開的編輯器視窗，即會擲回例外狀況。