ตัวแก้ไขไวท์เลเบลแบบอัจฉริยะ

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" : "th-TH"
  }, myCallback);

ฟังก์ชันคอลแบ็กจะถูกเรียกด้วย result-generated หรือ editor-exit อย่างใดอย่างหนึ่ง แต่ไม่ใช่ทั้งสองอย่าง แต่ละกรณีจะระบุว่าตัวแก้ไขถูกปิดแล้ว

ละเว้นหรือส่ง false สำหรับ useStickySettings เพื่อใช้การตั้งค่าเริ่มต้นจากโรงงาน

อย่าลืมเรียกดำเนินการหลังจากเหตุการณ์เอกสารพร้อมใช้งาน เพราะจะอ้างอิง DOM


แก้ไขภาพหลายภาพตามลำดับ

คุณสามารถแสดงตัวแก้ไขเพื่อแก้ไขภาพหลายภาพดังนี้ :

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

ฟังก์ชันคอลแบ็กจะถูกเรียกด้วย result-generated หนึ่งครั้งต่อแต่ละผลลัพธ์ที่ผู้ใช้ผลิตขึ้น (= หนึ่งครั้งต่อการคลิกบน 'เสร็จสิ้น') ในตอนท้ายจะมีการเรียก editor-exit หนึ่งครั้งซึ่งระบุว่า ตัวแก้ไขได้ปิดลงแล้ว โดยอาจเป็นเพราะผู้ใช้คลิกที่ X หรือไม่มีภาพเหลือให้แก้ไขอีกแล้ว แต่จะไม่มีคอลแบ็กเมื่อผู้ใช้ข้ามภาพไป

ละเว้นหรือส่ง false สำหรับ useStickySettings เพื่อใช้การตั้งค่าเริ่มต้นจากโรงงาน

อย่าลืมเรียกดำเนินการหลังจากเหตุการณ์เอกสารพร้อมใช้งาน เพราะจะอ้างอิง DOM


คอลแบ็ก function(opts)

ฟังก์ชัน edit จะใช้ฟังก์ชัน callback เป็นพารามิเตอร์ คอลแบ็กนี้อนุญาตให้คุณตอบสนองต่อการดำเนินการของผู้ใช้ และแจ้งเตือนเซิร์ฟเวอร์แบ็กเอนด์ของคุณเกี่ยวกับความคืบหน้าในการแก้ไขภาพ

ลายเซ็นของคอลแบ็กคือ function(opts) และข้อยกเว้นหรือค่าข้อมูลใด ๆ ที่ส่งคืนจะถูกละเว้น พารามิเตอร์ opts คือ PlainObject ซึ่งมี :

event

สตริงที่ระบุว่าเพิ่งเกิดอะไรขึ้น กรุณาดูตารางด้านล่าง

image เลือกได้ ออบเจ็กต์ JSON ของภาพ (รวมเฉพาะรหัสประจำตัวและรหัสลับเท่านั้น)
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 ของคุณ

ฟังก์ชันนั้นจะส่งคืนอาร์เรย์ JavaScript พร้อมสตริงซึ่งอธิบายคุณสมบัติที่ขาดหายไปในเบราว์เซอร์ปัจจุบัน แต่จำเป็นต้องมีเพื่อให้ตัวแก้ไขทำงานได้ หากอาร์เรย์นี้ว่างเปล่า คุณก็สามารถดำเนินการเรียกฟังก์ชัน edit ได้

ClippingMagic.edit(opts, callback)

ฟังก์ชัน edit จะใช้พารามิเตอร์ดังต่อไปนี้ :

opts

จำเป็นต้องมี PlainObject ซึ่งมีคู่รหัส/ค่าข้อมูลที่กำหนดค่าการเตรียมใช้งาน :

image

เลือกได้ ออบเจ็กต์ JSON ของภาพ (จำเป็นต้องมีเฉพาะรหัสประจำตัวและรหัสลับเท่านั้น)

images

เลือกได้ อาร์เรย์ของ ออบเจ็กต์ JSON ของภาพ (จำเป็นต้องมีเฉพาะรหัสประจำตัวและรหัสลับเท่านั้น)

useStickySettings

เลือกได้ บูลีน, 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 ส่งคืนอาร์เรย์ที่ไม่ว่างเปล่า หรือหากหน้าต่างตัวแก้ไขเปิดอยู่แล้ว ระบบจะแสดงข้อยกเว้น