화이트 라벨 스마트 편집기

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" : "ko-KR"
  }, myCallback);

콜백 함수는 result-generated 또는 editor-exit에 의하여 호출될 수 있으나, 동시에 호출되지는 않습니다. 각각은 편집기가 닫힘을 의미합니다.

공장 기본 설정을 사용하기 위하여 useStickySettings를 위하여 false를 생략 또는 통과합니다.

DOM을 참조하기 때문에 서류 준비 이벤트 이후 본 호출을 하십시오.


다수의 이미지를 순서적으로 편집

아래와 같이 다수의 이미지를 위해 편집기를 디스플레이할 수 있습니다:

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

콜백 함수는 사용자에 의하여 발생하는 각각의 결과에 한번씩 result-generated로 호출됩니다 (= '종료'를 클릭할때마다 한번씩) 마지막에, 사용자가 X를 클릭하거나 또는 편집할 이미지가 더 이상 없을 때 편집기가 닫혔다고 표시하는 editor-exit 호출이 있을 것입니다. 사용자가 이미지를 건너뛸때는 콜백이없습니다.

공장 기본 설정을 사용하기 위하여 useStickySettings를 위하여 false를 생략 또는 통과합니다.

DOM을 참조하기 때문에 서류 준비 이벤트 이후 본 호출을 하십시오.


콜백 function(opts)

edit 함수는 callback 함수를 변수로 받습니다. 이 콜백은 사용자가 귀하의 행동에 대하여 반응하고 귀하의 백엔드 서버에게 이미지 편집 진행을 통지하게 합니다.

콜백의 사인은 function(opts) 이며 모든 예외 또는 되돌아 온 값은 무시됩니다. opts 변수는 아래 사항을 포함하는 PlainObject 입니다:

event

지금 막 발생한 것을 표시하는 스트링, 아래 표 참조.

image 선택적 이미지 ISON 개체 (단지 아이디 및 암호만 포함됩니다).
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

선택적 불리안, true는 사용자'의 고정 설정이 사용됨을 의미하며, 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가 비어있지 않은 어레이를 돌려주거나 편집기 창이 이미 열려있으면, 예외가 나타난다.