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" : "ko-KR"
}, 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" : "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" : 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가 비어있지 않은 어레이를 돌려주거나 편집기 창이 이미 열려있으면, 예외가 나타난다.