อินเทอร์เฟซ Photo Editor ดั้งเดิม. การแก้ไขและการส่งออกในเบตาปัจจุบันยังอยู่ระหว่างการทดสอบ.

Xodera Plugins · Bubble Native

Xodera Photo Editor Native

แปลงรูปที่เลือกให้เป็นอวาตาร์, ภาพสินค้า หรือไฟล์แนบรายงานที่สอดคล้องกัน ตัด, หมุนและปรับขนาด แล้วบันทึกสำเนาที่ส่งออกในแอปของคุณ.

Public beta guides · Haptics instructions are in its Bubble listing

Public beta offer: free Bubble install · 7-day card trial, then US$1.50/month per plugin/project.

สร้างเวิร์กโฟลว์ ↓การตั้งค่าปลั๊กอิน ↗Native Lab

เอกสารที่ตรวจสอบ 6 พฤศจิกายน 2026

ตัวอย่างเชิงปฏิบัติ

อวตารโปรไฟล์ที่สม่ำเสมอก่อนอัปโหลด

ผู้ใช้ควรเลือกส่วนของรูปถ่ายที่จะแสดงในภาพโปรไฟล์สี่เหลี่ยมจัตุรัสแทนการยอมรับการตัดแบบสุ่ม.

`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.

รอ `source_loaded`; Begin crop → Apply crop, พร้อม Rotate หรือ Undo ตามต้องการ. เมื่อบันทึกอย่างชัดเจน, Export image.

เฉพาะบน `export_completed`, ใช้ `output_uri`, `output_width`, `output_height` และ `output_mime` เป็นอินพุตสำหรับกระบวนการอัปโหลดไฟล์ของคุณ. จากนั้นบันทึกอ้างอิงที่คงทนของมันในโปรไฟล์.

หากผู้ใช้ยกเลิกหรือ `editor_error` ทำงาน, ให้เก็บอวตารเก่าไว้. ล้างเซสชันเมื่อเปลี่ยนบัญชีเพื่อไม่ให้ผู้ใช้คนอื่นเห็นฉบับร่าง.

การแก้ไขจะสร้างสำเนาในเครื่อง. แอปของคุณเลือกวิธีบันทึกหรืออัปโหลดมัน.

เตรียมภาพตลาดหรือแคตาล็อกที่สม่ำเสมอ

การจัดกรอบที่แตกต่างและภาพขนาดใหญ่ทำให้แคตาล็อกไม่สม่ำเสมอและเพิ่มขนาดการอัปโหลด.

`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` และ `export_quality` มาจากนโยบายการอัปโหลดของคุณ.

ตัดพื้นที่ที่เกี่ยวข้อง, โดยอาจทำ Resize, จากนั้น Export image หลังจากผู้ใช้ยืนยัน. เก็บไฟล์/อ้างอิงต้นฉบับแยกต่างหาก.

ตรวจสอบ `output_width`, `output_height`, `output_bytes` และ `output_mime` ก่อนที่กระบวนการอัปโหลดของคุณจะบันทึกผลลัพธ์. เก็บอ้างอิงภาพที่ได้บนรายการ.

หากการส่งออกล้มเหลวหรือผลลัพธ์ละเมิดนโยบายการอัปโหลดของคุณ, แสดง `error_code` และให้ผู้ใช้แก้ไข. อย่าเขียนทับภาพรายการก่อนหน้าก่อนการยืนยันการอัปโหลด.

สร้างสำเนาภาพที่โฟกัสสำหรับรายงานภาคสนาม

ช่างเทคนิคอาจต้องการภาพใกล้ของส่วนที่เสียหายหนึ่งส่วนพร้อมคงภาพรายงานต้นฉบับ.

`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; อัตราส่วนการตัดสามารถปล่อยให้ไม่จำกัด.

Begin crop → Apply crop, จากนั้นใช้ Undo/Redo เพื่อเปรียบเทียบการแก้ไข. Export image สร้างสำเนาที่แก้ไข; แอปของคุณถามว่าจะแนบสำเนานั้นกับรายงานหรือไม่.

ใช้ `has_changes`, `can_undo`, `can_redo` และ `output_uri`. เก็บอ้างอิงต้นฉบับและที่แก้ไขแยกกันในฟิลด์แอปหลังการอัปโหลดสำเร็จ.

Cancel crop หรือ Reset edits จะคืนเส้นทางการแก้ไข; การยกเลิกต้องทำให้ไฟล์แนบ Report ดั้งเดิมไม่เปลี่ยนแปลง.

สิ่งที่ทำงานได้ในขณะนี้

Public beta. Use the documented controls and actions; test supported formats, permissions and device behavior in your own native app. Browser preview does not validate native device output.

สร้างเวิร์กโฟลว์

ใช้การกระทำเบต้าที่พร้อมด้านล่างและทดสอบผลบนอุปกรณ์เป้าหมายของคุณ.

ตัวอย่างเหล่านี้ใช้บันทึกแอปเช่น Lesson, Message และ Order. ให้แทนที่ด้วยประเภทข้อมูลและชื่อองค์ประกอบของคุณเอง. ที่อยู่สื่อตัวอย่างต้องถูกแทนที่ด้วยไฟล์ของคุณเอง.

ตั้งค่า source_url เป็นภาพที่เลือก. ใช้ document_context เพื่อระบุบัญชีและระเบียนที่กำลังแก้ไข, ดังนั้นการเปลี่ยนระเบียนจะลบรูปภาพก่อนหน้า.
หลังจาก source_loaded ให้เรียกใช้ Begin crop. เลือก 1:1 สำหรับอวาตาร์, ปรับการครอบและใช้ Apply crop. Cancel crop จะไม่เปลี่ยนแปลงรูปภาพ.
ใช้ Rotate, Flip หรือ Resize หากจำเป็น. Undo และ Redo จะเลื่อนผ่านการแก้ไขที่เสร็จสมบูรณ์; Reset edits จะคืนรูปภาพต้นฉบับ.
เรียกใช้ Export image. บน export_completed, อ่าน output_uri, output_width, output_height และ output_mime. บันทึกหรืออัปโหลดสำเนานั้นโดยใช้กระบวนการบันทึกไฟล์ที่คุณเลือก, จากนั้นเก็บไฟล์ที่บันทึกไว้ในบันทึก.

แผนภาพกระบวนการทำงาน — ไม่ใช่ภาพหน้าจอแอป

ตั้งค่าเพียงครั้งเดียว

การเปิดใช้งานคีย์สำหรับปลั๊กอินนี้กำลังวางแผนไว้ สร้างหรือเลือกโครงการแอป Bubble ของคุณใน BestPlugins → Dashboard → Plugins เลือก Xodera Photo Editor Native คัดลอกคีย์ของมัน แล้วเปิด Bubble → Plugins → Xodera Photo Editor Native และวางลงใน licensing_api_key บันทึกหนึ่งครั้ง; จากนั้นใช้การกระทำด้านล่าง แต่ละปลั๊กอินในแต่ละโครงการจะมีคีย์ของตนเอง.

เลือกหรือจับภาพด้วยแอปของคุณก่อน ให้ที่อยู่ภาพที่อ่านได้แก่ตัวแก้ไข การอนุญาตกล้องและไลบรารีภาพเป็นของตัวเลือกที่คุณใช้.

ตั้งค่าเพียงครั้งเดียว

สร้างหรือเลือกโครงการแอป Bubble ของคุณที่ BestPlugins → Dashboard → Plugins.
เลือกปลั๊กอินนี้และคัดลอกคีย์โครงการของมัน.
Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
เพิ่มองค์ประกอบ, เลือกข้อมูลแอปของคุณและสร้างเวิร์กโฟลว์ด้านล่าง.
In the dashboard, review and confirm the 7-day card trial for this plugin. It then costs US$1.50/month per app project, including development and production. Cancel before the trial ends to avoid the first charge.

การติดตั้งและการสมัครสมาชิก

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

บันทึกผลลัพธ์ในแอปของคุณ

บันทึกรูปภาพที่อัปโหลดหรือบันทึกถาวรลงใน Profile.image หรือฟิลด์แนบของคุณ. output_uri เป็นไฟล์ชั่วคราวบนอุปกรณ์, ดังนั้นให้บันทึกไฟล์นั้นด้วยกระบวนการที่คุณเลือกก่อน. จากนั้นเก็บ output_width, output_height และ output_mime เป็นเมตาดาต้า. เก็บรูปภาพต้นฉบับไว้หากต้องการทั้งสองเวอร์ชัน.

ความล้มเหลว, การยกเลิกและการกู้คืน

บน source_load_failed หรือ editor_error ให้แสดง error_code และเสนอ Load source. Cancel operation จะหยุดรับผลลัพธ์ที่ยังไม่สมบูรณ์; รอจนกว่า is_busy=no ก่อนเริ่มการแก้ไขใหม่. Clear session จะล้างตัวแก้ไข, ไม่ใช่รูปภาพที่บันทึกไว้ที่อื่น.

ความสามารถและขีดจำกัด

JPEG และ PNG ส่งออก; คุณภาพ 0–1; ความยาวด้านสูงสุดของภาพเอาต์พุต 1–4096 พิกเซล. อินพุต: สูงสุด 15 MiB และ 20 เมกะพิกเซล. สูงสุด 20 การแก้ไขที่เสร็จสมบูรณ์. ตัวเลือกการครอบ: อิสระ, 1:1, 4:3, 3:4 และ 16:9. ไม่มีกล้องในตัว, ฟิลเตอร์, การใส่ข้อความ, การแก้ไขมุมมอง, การส่งออก WebP หรือการอัปโหลดอัตโนมัติ.

การตั้งค่า, การกระทำและผลลัพธ์

ใช้ชื่อเหล่านี้ใน Bubble. ฟีเจอร์ที่วางแผนไว้จะถูกทำเครื่องหมายแยกต่างหาก.

การตั้งค่าเบต้าที่พร้อมใช้งาน

การตั้งค่าองค์ประกอบ

source_url · textdocument_context · textis_active · yes_nodisabled · yes_noshow_controls · yes_nocrop_aspect · textexport_format · textexport_quality · numberexport_max_dimension · numberallow_upscale · yes_noui_text_json · textlanguage · text

สถานะ

editor_status · textis_busy · yes_nohas_image · yes_nohas_changes · yes_nocan_undo · yes_nocan_redo · yes_noimage_width · numberimage_height · numberoutput_uri · textoutput_width · numberoutput_height · numberoutput_bytes · numberoutput_mime · texterror_code · textcrop_active · yes_nocrop_rect_json · text

เหตุการณ์

source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_error

การกระทำและอินพุตของมัน

Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear session

การตั้งค่าองค์ประกอบ · 12

source_urltext · ค่าเริ่มต้น: "": ค่าตัวอย่างhttps://bestplugins.online/native-samples/avatar.jpg; ตัวอย่าง Bubble expressionSelected Profile's image_url; ที่อยู่ของไฟล์เสียง วิดีโอ หรือรูปภาพที่เลือก ใช้ประเภทไฟล์ที่ปลั๊กอินนี้รองรับ

document_contexttext · ค่าเริ่มต้น: "": ค่าตัวอย่าง<current-user-id>; ตัวอย่าง Bubble expressionCurrent User's unique id; ค่าที่คงที่สำหรับบัญชีหรือบันทึกนี้ ใช้ค่าเดียวกันเมื่อกู้คืนไฟล์หรือร่างที่บันทึกไว้.

is_activeyes_no · ค่าเริ่มต้น: true: ค่าตัวอย่างyes; ตัวอย่าง Bubble expressionGuideHost's view_is_active (your yes/no custom state); ตั้งค่าเป็นใช่ขณะมุมมองนี้เปิดอยู่ ตั้งค่าเป็นไม่เมื่อออกจากมุมมอง เพื่อให้การเล่นหรืองานปัจจุบันหยุด

disabledyes_no · ค่าเริ่มต้น: false: ค่าตัวอย่างno; ตัวอย่าง Bubble expressionGuideHost's is_busy (your yes/no custom state); ปิดการใช้งานองค์ประกอบขณะแอปของคุณกำลังทำงานหรือการกระทำนี้ไม่พร้อมใช้งาน

show_controlsyes_no · ค่าเริ่มต้น: true: ค่าตัวอย่างyes; ตัวอย่าง Bubble expressionApp Settings' show_editor_controls; แสดงหรือซ่อนการควบคุมในตัว.

crop_aspecttext · ค่าเริ่มต้น: "free": ค่าตัวอย่าง1:1; ตัวอย่าง Bubble expressionAvatar Settings' crop_ratio; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

export_formattext · ค่าเริ่มต้น: "jpeg": ค่าตัวอย่างjpeg; ตัวอย่าง Bubble expressionFormat Dropdown's value; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

export_qualitynumber · ค่าเริ่มต้น: 0.85: ค่าตัวอย่าง0.85; ตัวอย่าง Bubble expressionImage Settings' quality; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

export_max_dimensionnumber · ค่าเริ่มต้น: 2048: ค่าตัวอย่าง2048; ตัวอย่าง Bubble expressionImage Settings' max_side; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

allow_upscaleyes_no · ค่าเริ่มต้น: false: ค่าตัวอย่างno; ตัวอย่าง Bubble expressionAllow upscale Checkbox is checked; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

ui_text_jsontext · ค่าเริ่มต้น: "": ค่าตัวอย่าง{}; ตัวอย่าง Bubble expressionApp Settings' player_labels_json (supported keys only); JSON ทางเลือกพร้อมปุ่มที่รองรับ เว้นว่างเพื่อใช้ข้อความในระบบ

languagetext · ค่าเริ่มต้น: "auto": ค่าตัวอย่างuk; ตัวอย่าง Bubble expressionCurrent User's preferred_language; ตั้งค่า language=auto ให้ตามอุปกรณ์หรือภาษาของเบราว์เซอร์ที่รองรับ ป้อนรหัสภาษาที่รองรับเพื่อเลือกอย่างชัดเจน

การกระทำและอินพุตของมัน · 13

Load source

ไม่มีพารามิเตอร์การกระทำ

Begin crop

ไม่มีพารามิเตอร์การกระทำ

Apply crop

origin_xnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง0; ตัวอย่าง Bubble expressionCrop Settings' x (or omit all rectangle inputs); ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

origin_ynumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง0; ตัวอย่าง Bubble expressionCrop Settings' y (or omit all rectangle inputs); ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

widthnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง512; ตัวอย่าง Bubble expressionResize Width Input's value:converted to number; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

heightnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง512; ตัวอย่าง Bubble expressionResize Height Input's value:converted to number; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

Cancel crop

ไม่มีพารามิเตอร์การกระทำ

Rotate

degreesnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง90; ตัวอย่าง Bubble expressionRotation Dropdown's value; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

Flip

axistext · ค่าเริ่มต้น: —: ค่าตัวอย่างhorizontal; ตัวอย่าง Bubble expressionFlip Direction Dropdown's value; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

Resize

widthnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง512; ตัวอย่าง Bubble expressionResize Width Input's value:converted to number; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

heightnumber · ค่าเริ่มต้น: —: ค่าตัวอย่าง512; ตัวอย่าง Bubble expressionResize Height Input's value:converted to number; ใช้ค่าจากบันทึกธุรกิจปัจจุบัน; ตรวจสอบความถูกต้องเทียบกับขีดจำกัดด้านล่าง

Undo

ไม่มีพารามิเตอร์การกระทำ

Redo

ไม่มีพารามิเตอร์การกระทำ

Reset edits

ไม่มีพารามิเตอร์การกระทำ

Export image

ไม่มีพารามิเตอร์การกระทำ

Cancel operation

ไม่มีพารามิเตอร์การกระทำ

Clear session

ไม่มีพารามิเตอร์การกระทำ

สถานะและเหตุการณ์

สถานะ

editor_status · text

ผลลัพธ์ปัจจุบันของการกระทำนี้ ใช้งานเหตุการณ์เสร็จสมบูรณ์ที่ตรงกันก่อนบันทึกความสำเร็จ

is_busy · yes_no

งานยังอยู่ระหว่างดำเนินการ โปรดรอก่อนเริ่มการกระทำอื่น.

has_image · yes_no