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-Hans-CN"
}, 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-Hans-CN"
}, myCallback);
回拨功能将通过result-generated为用户生成的每一个结果呼叫一次（= 每次点击‘完成’呼叫一次）。 结束时将有一次editor-exit通话，表示已经通过点击 X 或用完需要编辑的图像关闭编辑器。 当用户跳过一张图像时，没有回拨。
为useStickySettings忽略或填充false以使用出厂默认设置。
请务必在文档就绪事件之后进行此次呼叫，因为它会引用 DOM。
function(opts)
edit功能将callback功能视为一个参数。 该回拨允许您对用户行动作出回应，并将图像编辑进展状况通知您的后端服务器。
回拨签名是function(opts)和任何例外情况，或返回数值被忽视。 opts参数是包含以下成分的 PlainObject：
| 事件 | 有图像？ | 有错误？ | 表示 |
|---|---|---|---|
| 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返回一个非空置阵列，或者如果编辑器窗口已经打开，则会引发异常。