Skip to main content

象寄-图片翻译精修工具对接指南

图片翻译精修工具 iframe 对接​

  1. 一般在页面的弹框中通过 iframe 引入象寄图片精修工具，为弹框和 iframe 设置合适的宽高以保证显示效果。
  2. 待 iframe 加载完毕后，通过 iframe 的 window 对象向象寄图片精修工具发送一个 postMessage 消息，批量传递 requestId。
  3. 接入方通过监听象寄精修工具发送的 message 消息，获取精修结果 ，all 中包含了本次传入精修工具中的所有图片信息。
  4. 指定精修工具页面语言：https://www.xiangjifanyi.com/image-editor/#/?lang=KOR 支持中(CHS/CHT)、英(ENG)、日(JPN)、韩(KOR)、西班牙语(ESP)、葡萄牙语(PTB)
<!-- 1.在弹窗中通过 iframe 加载象寄精修工具 -->
<div id="some-dialog">
  <iframe
    id="xiangji-image-editor"
    title="象寄图片精修工具"
    style="width: 100%; height: 100%;"
    src="https://www.xiangjifanyi.com/image-editor/"
    frameborder="0"
    onload="iframeOnload()"
  ></iframe>
</div>
<script type="text/javascript">
  // 2.监听 iframe onload 事件，并向其发送需要处理的图片 requestId 数组
  function iframeOnload() {
    var iframe = document.querySelector('#xiangji-image-editor');
    iframe.contentWindow.postMessage(
      {
        name: "XJ_IMAGE_EDITOR_REQUESTIDS",
        requestIds: ["f350044c1c722a35"]
      },
      'https://www.xiangjifanyi.com'
    );
  }
  // 3.监听 iframe 发送的 message 事件，从中获取精修结果
  window.addEventListener('message', function (e) {
    const { name, all } = e.data;
    if (e.origin === 'https://www.xiangjifanyi.com' && name === 'XJ_IMAGE_EDITOR_URL') {
      console.log(all);
    }
  });
</script>

精修工具返回的 message 格式如下：

{
  // 固定值
  "name": "XJ_IMAGE_EDITOR_URL",
  // 当前图片的精修url
  "url": "https://www.example.com/a.png",
  // 当前图片的requestId
  "requestId": "hdiajdisajdas",
  // 本次批量精修中所有图片的requestId与精修后url映射，包括当前正在编辑的图片
  // 注意：没有经过精修工具编辑的图片url仍为通过api翻译的图片url
  "all": {
    "d01e619220a897ff": "https://www.example.com/a.png",
    "3dca52098ecd4550": "https://www.example.com/b.png"
  }
}

图片翻译精修工具对接【智能消除笔】和【文本翻译】功能​

功能示例图备注
智能消除笔智能消除笔智能消除笔对图像的修复效果优于普通消除笔
文本翻译文本翻译方便编辑图像时实时对文本进行翻译
<!-- 在弹窗中通过 iframe 加载象寄精修工具 -->
<div id="some-dialog">
  <iframe
    id="xiangji-image-editor"
    title="象寄图片精修工具"
    style="width: 100%; height: 100%;"
    src="https://www.xiangjifanyi.com/image-editor/#/?CommitTime=1667920070&AigcKeySign=123&AigcKey=123&TextTransSign=123&TextTransKey=123"
    frameborder="0"
    onload="iframeOnload()"
  ></iframe>
</div>

iframe src 中的参数如下（需要在服务端计算出签名）

参数类型参数备注
公共参数CommitTime生成签名时的时间戳，单位秒
【智能消除笔】参数AigcKeySignAigc 签名，计算方法为：`md5(CommitTime_UserKey_AigcKey)`
AigcKeyAigc 标识码
【文本翻译】参数TextTransSign文本翻译签名，计算方法为 `md5(CommitTime_UserKey_TextTransKey)`
TextTransKey文本翻译标识码