传参访问与嵌入集成

图改改是一款 AI 驱动的图片编辑工具，主打简单高效的图片文字修改功能，支持电脑和手机多端使用，无需专业 P 图技能，点击文字即可直接编辑，还提供图片翻译、字体识别等附加功能，满足各类图片文字处理需求。

传参

图改改支持传入图片地址到编辑器打开进行编辑，通过以下链接格式：

TypeScript

https://tugaigai.com/editor?image_url=${YOUR_IMAGE_URL}

（将${YOUR_IMAGE_URL}替换为目标图片的在线链接）

图片没有公网地址？可以不传 image_url，改成直接把图片推进去（Blob 或 base64）。

其他参数

参数名	作用	示例
`responsive`	控制界面布局，`responsive=true`时使用响应式界面（适合小屏设备嵌入），默认为三栏大屏布局。	`https://tugaigai.com/editor?image_url=xxx&responsive=true`
`hide_header`	隐藏编辑器顶部 Header（电脑端与手机端均生效），适合 iframe 嵌入时由宿主页自带导航。	`https://tugaigai.com/editor?image_url=xxx&hide_header=true`
`disable_ai`	关闭全部 AI 入口：侧栏 AI 页、手机端 AI 悬浮按钮、选中文字后的 AI 编辑 / 手动·AI 切换条，以及消除面板与文字面板底图里的 AI Removal。	`https://tugaigai.com/editor?image_url=xxx&disable_ai=true`
`disable_upload`	图片由宿主页提供（`image_url` 或直传），编辑器不再向用户索要图片：空画布上不弹上传框，标题菜单里也不给「换一张」。	`https://tugaigai.com/editor?disable_upload=true`
语言参数	在链接中添加语言代码，可设置编辑器界面语言,支持英语（en）、简体中文（cn）、繁体中文（hant）、日语（jp）、韩语（ko）、泰语（th）、俄语（ru）、印地语（hi）、法语（fr）、西班牙语（es）、葡萄牙语（pt）。	`https://tugaigai.com/cn/editor?image_url=xxx`（简体中文界面）

嵌入小屏时常用组合：

text

https://tugaigai.com/cn/m/editor?image_url=xxx&responsive=true&hide_header=true&disable_ai=true&disable_upload=true

嵌入时编辑器不再询问是否切换到电脑版 / 手机版——用哪套布局由你传的链接决定。

嵌入

iframe 嵌入代码：

Vue

<template #default>
  <iframe
    :src="iframeSrc"
    style="min-width:400px;min-height:600px;border:none;"
  />
</template>

效果：

获取编辑结果（postMessage）

父页面可通过 postMessage 向 iframe 内的编辑器索取当前画布编辑结果图（无水印 PNG Data URL）。

父页面 → 编辑器

iframe.contentWindow.postMessage(
  { type: 'editor:get-result', requestId: 'optional-id' },
  'https://tugaigai.com', // 建议写明目标源；开发可先用 '*'
)

字段	类型	说明
`type`	`'editor:get-result'`	固定值
`requestId`	`string`（可选）	原样回传，便于并发请求对齐
`format`	`'png' \| 'jpeg' \| 'webp'`（可选）	默认 `png`（无损）。不识别的值按 `png` 处理
`quality`	`0–1`（可选）	仅 `jpeg` / `webp` 生效，`png` 忽略

编辑器 → 父页面

成功：

{
  type: 'editor:result',
  requestId: 'optional-id',
  dataUrl: 'data:image/png;base64,...',
  mimeType: 'image/png',
  width: 1200,
  height: 800,
}

失败：

{
  type: 'editor:result-error',
  requestId: 'optional-id',
  error: 'Editor is not ready',
  code: 'not_ready', // not_ready | no_image | export_failed
}

error 文案可能变化，分支判断请用 code。

就绪通知

编辑器加载完成后主动广播一次（无需请求）：

{ type: 'editor:ready' }

它的含义是「编辑器可以接命令了」，不代表画布上已经有图。取结果图不必等它， editor:get-result 内部会等画布。

这条广播可能早于你的页面挂上 message 监听（首屏慢、或 iframe 提前开始加载时更容易发生），所以不要只依赖广播。确实需要确认编辑器已起来时（比如推图进去之前），轮询问一次即可，编辑器会立刻回同一个 editor:ready：

const timer = setInterval(() => {
  iframe.contentWindow.postMessage({ type: 'editor:ping' }, 'https://tugaigai.com')
}, 600)
// 收到 editor:ready 后 clearInterval(timer)

父页面完整示例

const iframe = document.querySelector('iframe')

window.addEventListener('message', (event) => {
  // 生产环境请校验 event.origin
  const data = event.data
  if (!data || typeof data !== 'object') return
  if (data.type === 'editor:result') {
    console.log('edited image', data.dataUrl)
    // 例如：预览
    // document.getElementById('preview').src = data.dataUrl
  }
  if (data.type === 'editor:result-error') {
    console.error(data.code, data.error)
  }
  if (data.type === 'editor:ready') {
    // 编辑器已能接命令（例如可以推图进去了）
  }
})

function requestEditedImage() {
  iframe.contentWindow.postMessage(
    { type: 'editor:get-result', requestId: String(Date.now()) },
    '*',
  )
}

说明：

请求早于画布就绪时，编辑器会先等再回，只有长时间未就绪才返回 not_ready，父页面不必自己重试。
返回的是当前编辑状态的整图导出，不是原始上传图。
导出尺寸为画布原始像素尺寸（width / height 一并返回）。

直接把图片推进去（无需公网 URL）

image_url 要求图片能被公网访问。如果你的页面手里已经有 Blob / File / base64 （刚合成的，或从自己服务下载的），可以直接发给编辑器，让编辑器走它自己的上传流程，省掉「先传到你的存储、再让编辑器拉回来」这一趟。

打开编辑器时不带 image_url，收到 editor:ready 后再发：

iframe.contentWindow.postMessage(
  {
    type: 'editor:open-image',
    requestId: 'optional-id',
    blob, // 首选：Blob / File 可跨窗口原样传递，不必转 base64
    filename: 'poster.png',
  },
  'https://tugaigai.com',
)

字段	类型	说明
`type`	`'editor:open-image'`	固定值
`blob`	`Blob` / `File`	首选；三种图片载荷任选其一
`arrayBuffer`	`ArrayBuffer`	可用 `postMessage` 第三个参数零拷贝转移
`dataUrl`	`string`	`data:image/png;base64,...`；裸 base64 字符串也认
`filename`	`string`（可选）	默认 `embed-image.<ext>`，扩展名会自动补
`mimeType`	`string`（可选）	优先级最高；否则按载荷类型、再按文件头推断
`requestId`	`string`（可选）	原样回传

编辑器的回复：

{ type: 'editor:open-image-progress', requestId, percentage: 42 }  // 上传进度 0–100
{ type: 'editor:image-opened', requestId, recordId: 'aBc123' }     // 已打开可编辑
{ type: 'editor:open-image-error', requestId, error: '...', code: 'bad_payload' }

code 为 bad_payload（载荷不可用）或 upload_failed（上传 / 建档失败）。

回传的 recordId 就是 ?id= 参数：之后用 https://tugaigai.com/editor?id=<recordId> 可以直接重新打开同一张图，无需再传一次。

换回推过的图

自己按图片存一份 recordId，来回切换时不必再上传一次——编辑器只是切记录，每张图各自保留自己的编辑内容，iframe 也不会重新加载：

iframe.contentWindow.postMessage(
  { type: 'editor:open-record', requestId: 'optional-id', recordId },
  'https://tugaigai.com',
)

回复与推图一致，是 editor:image-opened（缺 recordId 时回 editor:open-image-error，code: 'bad_payload'）。一两秒都没有回复？说明对接的是早于这条消息的版本，改回重新推字节即可。

ArrayBuffer 零拷贝转移：

iframe.contentWindow.postMessage(
  { type: 'editor:open-image', arrayBuffer, mimeType: 'image/webp' },
  'https://tugaigai.com',
  [arrayBuffer], // 转移后你手上的副本会失效
)

说明：

压缩、上传、建档、切到该图都由编辑器自己完成，你不需要改 iframe 的 src。
仅支持图片。PDF、需要分页切分的超长截图请继续用 image_url 或自己的上传页。
图片会像手动上传一样被缩放到编辑器的尺寸上限。

传参访问与嵌入集成 ​

传参 ​

其他参数 ​

嵌入 ​

获取编辑结果（postMessage） ​

父页面 → 编辑器 ​

编辑器 → 父页面 ​

就绪通知 ​

父页面完整示例 ​

直接把图片推进去（无需公网 URL） ​

换回推过的图 ​