圖圖修圖 · 可嵌入元件

一行程式碼,網站秒接圖片編輯器

把圖圖修圖專業編輯器(裁剪 / 濾鏡 / 摳圖 / 文字)嵌入你的任意網站。訪客直接在你站內修圖,可配置主題與工具,產品更新自動生效、你零維護。

複製即用 · 粘到網站 </body> 前

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_你的公鑰"
        data-mount="#dd-editor" defer></script>

把 pk_live_你的公鑰 換成控制台自助生成的公鑰(任何註冊使用者,免稽核、即時生效);容器 #dd-editor 需有寬高。接入時登記你的嵌入網址(白名單,本地開發填 localhost),只在你登記的網站顯示。

線上體驗

點下方按鈕,在本頁直接體驗嵌入的圖片編輯器。

JS API(需要回調/自定義時)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_你的公鑰',
    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	隱藏「開啟圖片」按鈕(只允許經 dd.open 傳圖)。
hideExport	boolean	隱藏「匯出下載」按鈕(只走「完成併發回」)。
saveText	string	「完成」按鈕文案(預設「完成併發回」,≤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)。

事件回撥

onReady()編輯器就緒。
onSave(file)使用者點「完成」→ file.dataUrl 為編輯結果。
onError(e)e.message 已轉人話(未啟用/無權/載入失敗)。
onClose()全屏浮層被關閉。

安全 · 自動更新

· 自助開通、自動稽核:任何註冊使用者在控制台登記站點名 + 嵌入網址即得公鑰,即時生效。
· 公鑰公開,靠登記網址白/黑名單兜底防盜用(黑名單優先);未登記域名接入會被拒並提示補登記;可隨時啟停。
· 真實來源統計:每次載入按 Origin 入賬(攔截也計),控制台可見來源明細,未登記域名一鍵補白名單。
· 編輯器執行在圖圖修圖自己的域(隔離);你的頁面拿不到任何圖圖修圖憑證,訪客的圖圖修圖私有作品也不會出現在嵌入元件裡。
· 元件由圖圖修圖自託管、自動更新 —— 功能升級你無需改程式碼、零維護。