TutuEdit · วิดเจ็ตที่ฝังได้

โค้ดเพียงบรรทัดเดียว —เพิ่ม โปรแกรมแก้ไขรูปภาพ ลงในเว็บไซต์ของคุณได้ในไม่กี่วินาที

ฝังโปรแกรมแก้ไขระดับโปรของ TutuEdit (ครอป / ฟิลเตอร์ / ตัดพื้นหลัง / ข้อความ) ลงในเว็บไซต์ใดก็ได้ ผู้เยี่ยมชมแก้ไขรูปภาพได้บนเว็บไซต์ของคุณโดยตรง กำหนดค่าธีมและเครื่องมือได้ และการอัปเดตผลิตภัณฑ์จะมีผลโดยอัตโนมัติโดยไม่ต้องบำรุงรักษาใด ๆ

ลองใช้งานจริง ดูโค้ดฝัง สร้างคีย์ (ไม่ต้องตรวจสอบ)

พร้อมคัดลอกและวาง · วางไว้ก่อนแท็ก </body> ของเว็บไซต์คุณ

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#dd-editor" defer></script>

แทนที่ pk_live_YOUR_KEY ด้วยคีย์สาธารณะที่คุณสร้างเองใน คอนโซล (ผู้ใช้ที่ลงทะเบียนคนใดก็ได้ — ไม่ต้องตรวจสอบ ทันที) คอนเทนเนอร์ #dd-editor ต้องมีความกว้างและความสูง เมื่อฝัง ให้ลงทะเบียน URL การฝังของคุณ (allowlist; สำหรับการพัฒนาในเครื่องให้ใช้ localhost) จะแสดงเฉพาะบนเว็บไซต์ที่คุณลงทะเบียนไว้เท่านั้น

ลองใช้งานจริง

แตะปุ่มด้านล่างเพื่อลองใช้ โปรแกรมแก้ไขรูปภาพ ที่ฝังไว้บนหน้านี้โดยตรง

JS API (สำหรับ callback / การปรับแต่ง)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = รูปภาพที่แก้ไขแล้ว (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // เปิดรูปภาพ
</script>

การกำหนดค่าทั้งหมด

พารามิเตอร์	ประเภท	คำอธิบาย
key	string	คีย์สาธารณะ pk_ ของคุณ (สร้างในคอนโซล) จำเป็น
theme	'auto'\|'light'\|'dark'	ธีม; auto จะตามโหมดสว่างหรือมืดของโฮสต์/ระบบ
hideToolbar	boolean	ซ่อนแถบเครื่องมือด้านซ้าย (กรณีมุมมองแบบมินิมัล / ส่งออกแตะเดียว)
hideHeader	boolean	ซ่อนแถบด้านบน (เมื่อคุณสร้าง UI ของคุณเองและส่งออกผ่าน export())
hideOpen	boolean	ซ่อนปุ่ม «Open image» (อนุญาตรูปภาพผ่าน dd.open เท่านั้น)
hideExport	boolean	ซ่อนปุ่ม «Export & download» (ใช้ «Done & send back» เท่านั้น)
saveText	string	ข้อความปุ่ม «Done» (ค่าเริ่มต้น «Done & send back», ≤16 อักขระ)
exportFormat	'png'\|'jpg'\|'webp'	รูปแบบการส่งออกเมื่อเสร็จสิ้น
exportQuality	number 0..1	คุณภาพ JPG/WebP

เมธอด

dd.open(url, name?)เปิดรูปภาพในโปรแกรมแก้ไข (url หรือ dataURL)
dd.export(format?, quality?)ส่งออกผลลัพธ์ปัจจุบัน → Promise<{dataUrl,mime,size}>
dd.setTheme('dark')สลับธีมขณะรันไทม์
dd.destroy()ถอนการโหลดวิดเจ็ต (ลบ iframe)

callback ของเหตุการณ์

onReady()โปรแกรมแก้ไขพร้อมแล้ว
onSave(file)ผู้ใช้แตะ «Done» → file.dataUrl คือผลลัพธ์ที่แก้ไขแล้ว
onError(e)e.message อ่านเข้าใจง่าย (ปิดใช้งาน / ไม่มีสิทธิ์ / โหลดล้มเหลว)
onClose()ปิดโอเวอร์เลย์เต็มจอแล้ว

ความปลอดภัย · อัปเดตอัตโนมัติ

· บริการตนเอง อนุมัติอัตโนมัติ: ผู้ใช้ที่ลงทะเบียนคนใดก็ได้ลงทะเบียนชื่อเว็บไซต์ + URL การฝังในคอนโซลเพื่อรับคีย์ ซึ่งมีผลทันที
· คีย์สาธารณะเป็นสาธารณะ แต่ได้รับการปกป้องด้วยรายการอนุญาต/บล็อก URL ที่ลงทะเบียนเพื่อป้องกันการใช้ในทางที่ผิด (บล็อกลิสต์มาก่อน) คำขอจากโดเมนที่ไม่ได้ลงทะเบียนจะถูกปฏิเสธพร้อมแจ้งให้ลงทะเบียน เปิด/ปิดได้ทุกเมื่อ
· การวิเคราะห์แหล่งที่มาจริง: ทุกการโหลดจะถูกนับตาม Origin (รวมถึงที่ถูกบล็อก) คอนโซลจะแสดงรายละเอียดแยกตามแหล่งที่มา และโดเมนที่ไม่ได้ลงทะเบียนสามารถเพิ่มลงในรายการอนุญาตได้ด้วยการแตะเดียว
· โปรแกรมแก้ไขทำงานบนโดเมนของ TutuEdit เอง (แยกจากกัน) หน้าเว็บของคุณไม่สามารถเข้าถึงข้อมูลรับรอง TutuEdit ใด ๆ ได้ และผลงานส่วนตัวใน TutuEdit ของผู้เยี่ยมชมจะไม่ปรากฏในวิดเจ็ตเลย
· วิดเจ็ตนี้โฮสต์เองและอัปเดตอัตโนมัติโดย TutuEdit — การอัปเกรดฟีเจอร์ไม่ต้องแก้ไขโค้ดในฝั่งคุณ ไม่ต้องบำรุงรักษา