TutuEdit · 埋め込みウィジェット

たった1行のコードで、数秒であなたのサイトに画像エディターを追加

TutuEditのプロ仕様エディター(切り抜き / フィルター / 背景切り抜き / テキスト)をあらゆるWebサイトにEmbed。訪問者はあなたのサイト内で直接写真を編集できます。テーマやツールを設定でき、製品のアップデートは自動で反映されるので、メンテナンス不要です。

ライブで試す組み込みコードを見るキーを生成(審査なし)

コピペですぐ使える · サイトの </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を登録してください(許可リスト。ローカル開発では localhostを使用)。登録したサイトでのみ表示されます。

ライブで試す

下のボタンをタップして、このページで組み込み済みの画像エディターをそのまま試せます。

JS API(コールバック / カスタマイズ用)

<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	“画像を開く”ボタンを非表示(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()全画面オーバーレイが閉じられた。

セキュリティ · 自動更新

· セルフサービス、自動承認:登録ユーザーがコンソールでサイト名 + 埋め込みURLを登録すればキーを取得でき、即時有効になります。
· 公開鍵は公開されていますが、登録URLの許可/ブロックリストによって不正利用から保護されます(ブロックリスト優先)。未登録ドメインからのリクエストは拒否され、登録を促すメッセージが表示されます。いつでもオン/オフできます。
· 実際のオリジン統計:読み込みごとに Origin 別に計上され(ブロックされたものも含む)、コンソールでオリジン別の内訳が確認でき、未登録ドメインはワンタップで許可リストに追加できます。
· エディターはTutuEdit自身のドメインで動作します(隔離)。あなたのページはTutuEditの認証情報に一切アクセスできず、訪問者のTutuEditのプライベート作品がウィジェットに現れることもありません。
· ウィジェットはTutuEditがセルフホスト・自動更新します。機能アップグレードにあなた側のコード変更は不要、メンテナンスはゼロです。