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

ขั้นตอนการผนวกรวม

ก่อนอื่น อย่าลืมอ่าน เริ่มต้นใช้งานด่วน

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" : 2346,
      "secret" : "image_secret1"
    },
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "th-TH"
  }, myCallback);

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

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

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

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

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

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

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

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

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

คอลแบ็ก function(opts)

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

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

ทันทีที่ตัวแก้ไขปิดลงแล้ว คุณสามารถเรียก edit() ได้อีกครั้ง (การเรียกที่ดำเนินการก่อนหน้านั้นจะนำไปสู่ข้อยกเว้น)

callback({
  "event" : "result-generated",
  "image" : {
    "id" : 2346,
    "secret" : "image_secret1"
  }
}); 

คำนิยามของฟังก์ชัน

ClippingMagic.initialize(opts) -> array_of_missing_features

ฟังก์ชัน initialize จะนำ PlainObject ที่มีคู่รหัส/ค่าข้อมูลที่กำหนดค่าการเตรียมใช้งาน :

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

ClippingMagic.edit(opts, callback)

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

วิธีการนี้จะไม่ส่งคืนค่า ถ้ายังไม่มีการเรียก initialize ก่อนการเรียกวิธีการนี้ หรือหาก initialize ส่งคืนอาร์เรย์ที่ไม่ว่างเปล่า หรือหากหน้าต่างตัวแก้ไขเปิดอยู่แล้ว ระบบจะแสดงข้อยกเว้น