图图点点 · 可嵌入组件

一行代码,网站秒接图片编辑器

把图图点点专业编辑器(裁剪 / 滤镜 / 抠图 / 文字)嵌入你的任意网站。访客直接在你站内修图,可配置主题与工具,产品更新自动生效、你零维护。

复制即用 · 粘到网站 </body> 前

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

把 pk_live_你的公钥 换成控制台自助生成的公钥(任何注册用户,免审核、即时生效);容器 #dd-editor 需有宽高。接入时登记你的嵌入网址(白名单,本地开发填 localhost),只在你登记的网站显示。

在线体验

点下方按钮,在本页直接体验嵌入的图片编辑器。

JS API(需要回调/自定义时)

<script src="https://tutudd.net/embed.js"></script>
<script>
  const dd = TutuDD.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 入账(拦截也计),控制台可见来源明细,未登记域名一键补白名单。
· 编辑器运行在图图点点自己的域(隔离);你的页面拿不到任何图图点点凭证,访客的图图点点私有作品也不会出现在嵌入组件里。
· 组件由图图点点 自托管、自动更新 —— 功能升级你无需改代码、零维护。