ClippingMagic.js

ClippingMagic.js는 귀하가 편리하게 Clipping Magic 편집기를 귀하의 고유 웹사이트에 통합할 수 있습니다. 전면 페이지에 있는것과 같이 단일 이미지 또는 대량 클리핑에서와 같이 일련의 이미지들을 편집할 수 있습니다.

시도해 보십시오

이미지 몇개를 업로드하신 이후 귀하의 브라우저에서 아래 예를 실행할 수 있습니다, "시도해 보기!"-버튼을 클리해보십시오.

일반 Clipping Magic 편집기와 API 편집기 사이에는 다수의 차이점이 있습니다:

  • 사용자 지정 기본 설정은 제공되지 않습니다.
  • 도움말 시작 화면은 디스플레이 되지 않습니다.

설정

ClippingMagic.js를 사용하려면, 편집을 허용할 페이지에 포함하고 초기화하여 시작하십시오:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript"></script>
<script type="text/javascript">
  var errorsArray = ClippingMagic.initialize({apiId: 123});
  if (errorsArray.length > 0) alert("죄송합니다, 귀하의 브라우저에 필요한 기능이 없습니다.: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagis.js는 jQuery에 의존함으로, ClippingMagic.js를 로딩하기 이전에 jQuery를 반드시 로딩하십시오.


단일 이미지 편집

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

ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "locale" : "ko-KR"
  }, callback);

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

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


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

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

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

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

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 및 비밀만 필요합니다).
locale 선택적 편집기에 사용되는 디스플레이 언어. 생략하면 기본값은 영어. 유효한 값들은:
코드디스플레이 언어
en-US English (영어)
de-DE Deutsch (독일어)
es-ES Español (스페인어)
fr-FR Français (프랑스어)
it-IT Italiano (이탈리아어)
ja-JP 日本語 (일본어)
ko-KR 한국어
pt-BR Português (포르투갈어)
zh-Hans-CN 简体中文 (중국어)
callback

요구사항 상세한 것은 위의 호출 부분을 참조하십시오.

이 방법은 값을 돌려주지 않습니다. 이 방법을 호출하기 이전에 initialize가 호출되지 않았거나 또는 initialize가 비어있지 않은 어레이를 돌려주거나 편집기 창이 이미 열려있으면, 예외가 나타난다.