白標智慧編輯器

ClippingMagic.js 允許您方便地將 Clipping Magic 編輯器與您的網站相整合。 您可以和在首頁一樣編輯單個圖像,或者和在大量剪裁中一樣循序編輯圖像。

整合步驟

請務必首先閲讀快速啟動

  1. 使用伺服器 API 上傳一個圖像。

  2. 如下所述,嵌入白標智慧編輯器。

  3. 對真人操作者剪輯圖像時您的代碼收到的回呼作出回應,例如,透過指示您的後端下載最新可用的結果。

此整合選項爲您提供完全控制,但需要更加深入的前端整合。 如果您想要一個更加簡單的整合選項,請查看托管智慧編輯器

設定

如欲使用 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" : 2345,
      "secret" : "image_secret"
    },
    "useStickySettings" : true,
    "locale" : "zh-Hant-TW"
  }, myCallback);

回呼功能將透過result-generatededitor-exit收到回呼,但不會兩者回呼均收到。 任一選項均表示編輯器已關閉。

useStickySettings省略或傳入false,以使用原廠預設值。

請確保在文件就緒事件進行此次呼叫,因爲它會參照 DOM。


循序編輯多個圖像

您可以如此為編輯多個圖像顯示編輯器:

ClippingMagic.edit({
    "images" : [ {
      "id" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "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" : 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

可選。 Boolean, 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傳回一個非空白陣列,或者已有打開的編輯器視窗,即會擲回例外狀況。