TutuEdit · Widget có thể nhúng

Một dòng mã —thêm trình chỉnh sửa ảnh vào trang web của bạn trong vài giây

Nhúng trình chỉnh sửa chuyên nghiệp của TutuEdit (cắt / bộ lọc / tách nền / văn bản) vào bất kỳ trang web nào. Khách truy cập chỉnh sửa ảnh ngay trên trang của bạn; cấu hình chủ đề và công cụ, còn các bản cập nhật sản phẩm được áp dụng tự động mà không cần bảo trì.

Dùng thử trực tiếp Xem mã nhúng Tạo khóa (không cần duyệt)

Sẵn sàng sao chép-dán · dán trước thẻ </body> của trang web bạn

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

Thay pk_live_YOUR_KEY bằng khóa công khai mà bạn tự tạo trong bảng điều khiển (mọi người dùng đã đăng ký — không cần duyệt, tức thì); vùng chứa #dd-editor cần có chiều rộng và chiều cao. Khi nhúng, hãy đăng ký các URL nhúng của bạn (danh sách cho phép; để phát triển cục bộ hãy dùng localhost); nó chỉ hiển thị trên các trang web bạn đã đăng ký.

Dùng thử trực tiếp

Nhấn nút bên dưới để dùng thử trình chỉnh sửa ảnh được nhúng ngay trên trang này.

JS API (cho callback / tùy chỉnh)

<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 = ảnh đã chỉnh sửa (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // mở một ảnh
</script>

Cấu hình đầy đủ

Tham số	Kiểu	Mô tả
key	string	Khóa công khai pk_ của bạn (được tạo trong bảng điều khiển). Bắt buộc.
theme	'auto'\|'light'\|'dark'	Chủ đề; auto theo chế độ sáng hoặc tối của host/hệ thống.
hideToolbar	boolean	Ẩn thanh công cụ bên trái (kịch bản xem tối giản / xuất một chạm).
hideHeader	boolean	Ẩn thanh trên cùng (khi bạn tự xây UI và xuất qua export()).
hideOpen	boolean	Ẩn nút «Open image» (chỉ cho phép ảnh qua dd.open).
hideExport	boolean	Ẩn nút «Export & download» (chỉ dùng «Done & send back»).
saveText	string	Nhãn nút «Done» (mặc định «Done & send back», ≤16 ký tự).
exportFormat	'png'\|'jpg'\|'webp'	Định dạng xuất khi hoàn tất.
exportQuality	number 0..1	Chất lượng JPG/WebP.

Phương thức

dd.open(url, name?)Mở một ảnh trong trình chỉnh sửa (url hoặc dataURL).
dd.export(format?, quality?)Xuất kết quả hiện tại → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Chuyển chủ đề khi chạy.
dd.destroy()Gỡ widget (xóa iframe).

Callback sự kiện

onReady()Trình chỉnh sửa đã sẵn sàng.
onSave(file)Người dùng nhấn «Done» → file.dataUrl là kết quả đã chỉnh sửa.
onError(e)e.message dễ hiểu với người dùng (đã tắt / không có quyền / tải thất bại).
onClose()Lớp phủ toàn màn hình đã bị đóng.

Bảo mật · Tự động cập nhật

· Tự phục vụ, tự động phê duyệt: mọi người dùng đã đăng ký chỉ cần đăng ký tên trang + URL nhúng trong bảng điều khiển để nhận khóa, có hiệu lực tức thì.
· Khóa công khai là công khai; nó được bảo vệ bằng danh sách cho phép/chặn URL đã đăng ký chống lạm dụng (danh sách chặn được ưu tiên); các yêu cầu từ tên miền chưa đăng ký sẽ bị từ chối kèm nhắc đăng ký; bật/tắt bất cứ lúc nào.
· Phân tích nguồn gốc thực: mỗi lần tải được tính theo Origin (kể cả lần bị chặn); bảng điều khiển hiển thị chi tiết theo từng nguồn, và các tên miền chưa đăng ký có thể được thêm vào danh sách cho phép chỉ với một chạm.
· Trình chỉnh sửa chạy trên tên miền riêng của TutuEdit (cách ly); trang của bạn không thể truy cập bất kỳ thông tin đăng nhập TutuEdit nào, và tác phẩm riêng tư TutuEdit của khách truy cập không bao giờ xuất hiện trong widget.
· Widget được tự lưu trữ và tự động cập nhật bởi TutuEdit — nâng cấp tính năng không cần thay đổi mã ở phía bạn, không cần bảo trì.