图片编辑器接入指南

一、接入图片翻译API

接入图片翻译API获取编辑器渲染数据pictureEditor

GetImageTranslateRequest request = new GetImageTranslateRequest();
request.setExtra(" {\"without_text\":\"false\",\"have_ocr\":\"false\",\"have_psd\":\"true\",\"ignoreEntityRecongizationMarker\":\"false\"}");
request.setUrl("https://xxxx.png");
request.setSourceLanguage("zh");
request.setTargetLanguage("en");
GetImageTranslateResponse response = null;
try {
    response = client.getAcsResponse(request);
} catch (ClientException e) {
    e.printStackTrace();
}
System.out.println(JSONObject.toJSON(response));

• 重点 extra 参数 have_psd 需要设置成true ，才能输出psd 信息用于渲染图片编辑器

{
  "without_text": "false",
  "have_ocr": "false",
  "have_psd": "true",   -- 控制是否输出psd信息，用于渲染图片编辑器
  "ignoreEntityRecongizationMarker": "false"
}

• 输出结构增加，pictureEditor 最后带入编辑器用于渲染

{
  "code": 200,
  "data": {
    "pictureEditor": "{\"backgroundColor\":\"transparent\",\"children\":[{\"backgroundImg\":\"https://ae01.alicdn.com/kf/Hb07905b5f1ed4cb6bf80fd9cfd37ee0eG.jpg\",\"height\":800,\"id\":1,\"label\":\"background\",\"left\":0,\"src\":\"https://global.mabangerp.com/image/slider/worldfirst.png\",\"top\":0,\"type\":\"image\",\"width\":800,\"zIndex\":1},{\"backgroundColor\":\"#ff0431\",\"color\":\"#fefafa\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":83,\"id\":2,\"label\":\"bg\",\"left\":128,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":1,\"textAlign\":\"left\",\"top\":57,\"type\":\"text\",\"width\":215,\"zIndex\":2},{\"backgroundColor\":\"transparent\",\"color\":\"#fefafa\",\"content\":\"ANT GROUP\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":24,\"height\":71,\"id\":3,\"label\":\"element\",\"left\":134,\"letterSpacing\":0,\"lineHeight\":24,\"ocrContent\":\"蚂蚁集团ANT GROUP\",\"pairId\":1,\"textAlign\":\"left\",\"top\":63,\"type\":\"text\",\"width\":203,\"zIndex\":8},{\"backgroundColor\":\"#ff0431\",\"color\":\"#fefafa\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":59,\"id\":4,\"label\":\"bg\",\"left\":388,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":2,\"textAlign\":\"left\",\"top\":55,\"type\":\"text\",\"width\":164,\"zIndex\":3},{\"backgroundColor\":\"transparent\",\"color\":\"#fefafa\",\"content\":\"Miles exchange\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":22,\"height\":47,\"id\":5,\"label\":\"element\",\"left\":394,\"letterSpacing\":0,\"lineHeight\":22,\"ocrContent\":\"万里汇\",\"pairId\":2,\"textAlign\":\"left\",\"top\":61,\"type\":\"text\",\"width\":152,\"zIndex\":9},{\"backgroundColor\":\"#ff0331\",\"color\":\"#feeff2\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":39,\"id\":6,\"label\":\"bg\",\"left\":390,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":3,\"textAlign\":\"left\",\"top\":107,\"type\":\"text\",\"width\":230,\"zIndex\":4},{\"backgroundColor\":\"transparent\",\"color\":\"#feeff2\",\"content\":\"A wholly-owned subsidiary of Ant Financial Group\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":27,\"id\":7,\"label\":\"element\",\"left\":396,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"蚂蚁集团旗下全资子公司\",\"pairId\":3,\"textAlign\":\"left\",\"top\":113,\"type\":\"text\",\"width\":218,\"zIndex\":10},{\"backgroundColor\":\"#ff012e\",\"color\":\"#fefcfc\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":183,\"id\":8,\"label\":\"bg\",\"left\":91,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":4,\"textAlign\":\"left\",\"top\":256,\"type\":\"text\",\"width\":613,\"zIndex\":5},{\"backgroundColor\":\"transparent\",\"color\":\"#fefcfc\",\"content\":\"Wan Li received lightning delivery cross-border settlement without foreign exchange loss\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":30,\"height\":171,\"id\":9,\"label\":\"element\",\"left\":97,\"letterSpacing\":0,\"lineHeight\":30,\"ocrContent\":\"万里收款闪电达跨境结算无汇损\",\"pairId\":4,\"textAlign\":\"left\",\"top\":262,\"type\":\"text\",\"width\":601,\"zIndex\":11},{\"backgroundColor\":\"#ff022e\",\"color\":\"#fef0f1\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":58,\"id\":10,\"label\":\"bg\",\"left\":103,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":5,\"textAlign\":\"left\",\"top\":454,\"type\":\"text\",\"width\":363,\"zIndex\":6},{\"backgroundColor\":\"transparent\",\"color\":\"#fef0f1\",\"content\":\"Cap at 0.3% rate\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":31,\"height\":46,\"id\":11,\"label\":\"element\",\"left\":109,\"letterSpacing\":0,\"lineHeight\":31,\"ocrContent\":\"0.3%费率封顶\",\"pairId\":5,\"textAlign\":\"left\",\"top\":460,\"type\":\"text\",\"width\":351,\"zIndex\":12},{\"backgroundColor\":\"#f5f5f6\",\"color\":\"#2c2c2c\",\"content\":\"\",\"fontFamily\":\"Arimo-Regular\",\"fontSize\":12,\"height\":53,\"id\":12,\"label\":\"bg\",\"left\":151,\"letterSpacing\":0,\"lineHeight\":12,\"ocrContent\":\"\",\"pairId\":6,\"textAlign\":\"left\",\"top\":613,\"type\":\"text\",\"width\":210,\"zIndex\":7},{\"backgroundColor\":\"transparent\",\"color\":\"#2c2c2c\",\"content\":\"Speed registration\",\"contents\":[],\"fontFamily\":\"Arimo-Regular\",\"fontSize\":24,\"height\":41,\"id\":13,\"label\":\"element\",\"left\":157,\"letterSpacing\":0,\"lineHeight\":24,\"ocrContent\":\"极速注册\",\"pairId\":6,\"textAlign\":\"left\",\"top\":619,\"type\":\"text\",\"width\":198,\"zIndex\":13}],\"height\":800,\"left\":0,\"opacity\":1,\"scale\":1,\"top\":0,\"type\":\"stage\",\"width\":800}",
    "url": "https://ae01.alicdn.com/kf/Haca8565e0e93445182aa3f70f74013b1v.png"
  },
  "requestId": "1B16279C-E725-44DE-B751-470E00190397"
}

二、图片编辑器接入

仅支持Iframe嵌入的方式

• 适配图片编辑器组件

<template>
  <div className="picture-editor-component">
    <iframe id="editor-Iframe" src="https://www.alifanyi.com/erp/imageTrans.html" frameBorder="no" scrolling="no" />
  </div>
</template>

<script>
  export default {
    name: 'PictureEditor',
    props: {
      data: {
        type: Object,
        required: true
      },
      onChange: {
        type: Function,
        required: false
      },
      onCompleted: {
        type: Function,
        required: true
      }
    },
    data () {
      return {
      }
    },
    methods: {
      receiveMessage (event) {
        if (event.data && !event.data.type) {
          const postData = JSON.parse(event.data);
          const { type, data } = postData;
          switch (type) {
            case 'base64':
              this.onCompleted(data);
              break;
            case 'psd':
              this.onChange(data);
              break;
            case 'autoHeight':
              const iframe = document.getElementById('editor-Iframe');
              iframe.style.height = data.editorHeight + 'px';
              break;
            default:
              break;
          }
        }
      },
      postMessage () {
        const iFrame = document.getElementById('editor-Iframe' );
        const {sourceLang, targetLang, templateJson} = this.data;
        if (iFrame) {
          iFrame.onload = function() {
            const data = {
              sourceLang,
              targetLang,
              templateJson,
              locale: 'zh-cn', // zh-cn 或者 en 或者 ko 或者 ja，新版编辑器的界面语种。默认值为zh-cn
              // downloadable: true, // 默认为true, 如果是false的时候，则不会显示 下载图片 按钮，仅新版本生效
              // submitText: '完成编辑', // 提交按钮的文案，默认根据语种切换
              // downloadText: '下载图片', // 下载按钮的文案，默认根据语种切换
            };
            iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
          };
        }
      },
    },
    mounted () {
      window.addEventListener('message', this.receiveMessage, true);
      this.postMessage();
    },
  }
</script>
<style scoped>
  .picture-editor-component{
    width: 1440px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  iframe{
    width: 1440px;
  }
</style>

• 组件引用

<template>
  <div class="demo">
    <PictureEditor :data = "data" :onCompleted = "onCompleted" />
  </div>
</template>
<script>
import PictureEditor from '@/components/pictureEditor'
export default {
  name: 'HelloWorld',
  components: {
    PictureEditor
  },
  data () {
    return {
      // 传入语向及psd图层信息
      data: {
        sourceLang: 'zh',         //图片翻译原语种
        targetLang: 'en',          //图片翻译目标语种
        //图片编辑器图层数据，使用上面的pictureEditor字段数据
        templateJson: [{"backgroundColor":"transparent","children":[{"backgroundImg":"https://ae01.alicdn.com/kf/Hb07905b5f1ed4cb6bf80fd9cfd37ee0eG.jpg","height":800,"id":1,"label":"background","left":0,"src":"https://global.mabangerp.com/image/slider/worldfirst.png","top":0,"type":"image","width":800,"zIndex":1},{"backgroundColor":"#ff0431","color":"#fefafa","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":83,"id":2,"label":"bg","left":128,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":1,"textAlign":"left","top":57,"type":"text","width":215,"zIndex":2},{"backgroundColor":"transparent","color":"#fefafa","content":"ANT GROUP","contents":[],"fontFamily":"Arimo-Regular","fontSize":24,"height":71,"id":3,"label":"element","left":134,"letterSpacing":0,"lineHeight":24,"ocrContent":"蚂蚁集团ANT GROUP","pairId":1,"textAlign":"left","top":63,"type":"text","width":203,"zIndex":8},{"backgroundColor":"#ff0431","color":"#fefafa","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":59,"id":4,"label":"bg","left":388,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":2,"textAlign":"left","top":55,"type":"text","width":164,"zIndex":3},{"backgroundColor":"transparent","color":"#fefafa","content":"Miles exchange","contents":[],"fontFamily":"Arimo-Regular","fontSize":22,"height":47,"id":5,"label":"element","left":394,"letterSpacing":0,"lineHeight":22,"ocrContent":"万里汇","pairId":2,"textAlign":"left","top":61,"type":"text","width":152,"zIndex":9},{"backgroundColor":"#ff0331","color":"#feeff2","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":39,"id":6,"label":"bg","left":390,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":3,"textAlign":"left","top":107,"type":"text","width":230,"zIndex":4},{"backgroundColor":"transparent","color":"#feeff2","content":"A wholly-owned subsidiary of Ant Financial Group","contents":[],"fontFamily":"Arimo-Regular","fontSize":12,"height":27,"id":7,"label":"element","left":396,"letterSpacing":0,"lineHeight":12,"ocrContent":"蚂蚁集团旗下全资子公司","pairId":3,"textAlign":"left","top":113,"type":"text","width":218,"zIndex":10},{"backgroundColor":"#ff012e","color":"#fefcfc","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":183,"id":8,"label":"bg","left":91,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":4,"textAlign":"left","top":256,"type":"text","width":613,"zIndex":5},{"backgroundColor":"transparent","color":"#fefcfc","content":"Wan Li received lightning delivery cross-border settlement without foreign exchange loss","contents":[],"fontFamily":"Arimo-Regular","fontSize":30,"height":171,"id":9,"label":"element","left":97,"letterSpacing":0,"lineHeight":30,"ocrContent":"万里收款闪电达跨境结算无汇损","pairId":4,"textAlign":"left","top":262,"type":"text","width":601,"zIndex":11},{"backgroundColor":"#ff022e","color":"#fef0f1","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":58,"id":10,"label":"bg","left":103,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":5,"textAlign":"left","top":454,"type":"text","width":363,"zIndex":6},{"backgroundColor":"transparent","color":"#fef0f1","content":"Cap at 0.3% rate","contents":[],"fontFamily":"Arimo-Regular","fontSize":31,"height":46,"id":11,"label":"element","left":109,"letterSpacing":0,"lineHeight":31,"ocrContent":"0.3%费率封顶","pairId":5,"textAlign":"left","top":460,"type":"text","width":351,"zIndex":12},{"backgroundColor":"#f5f5f6","color":"#2c2c2c","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":53,"id":12,"label":"bg","left":151,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":6,"textAlign":"left","top":613,"type":"text","width":210,"zIndex":7},{"backgroundColor":"transparent","color":"#2c2c2c","content":"Speed registration","contents":[],"fontFamily":"Arimo-Regular","fontSize":24,"height":41,"id":13,"label":"element","left":157,"letterSpacing":0,"lineHeight":24,"ocrContent":"极速注册","pairId":6,"textAlign":"left","top":619,"type":"text","width":198,"zIndex":13}],"height":800,"left":0,"opacity":1,"scale":1,"top":0,"type":"stage","width":800},]
      }
    }
  },
  methods: {
    // onChange: (data) => {
    //   console.log(data)
    // },
    onCompleted: (data) => {
      //console.log(data)
    }
  }
}
</script>

<body>
    <iframe style="width: 1600px;" id="editor-Iframe" src="https://www.alifanyi.com/erp/imageTrans.html" frameBorder="no" scrolling="no"></iframe>
    <script type="text/javascript">
        const iFrame = document.getElementById('editor-Iframe');
        const mockData = {
            sourceLang: 'zh',
            targetLang: 'en',
            templateJson: [{"backgroundColor":"transparent","children":[{"backgroundImg":"https://ae01.alicdn.com/kf/Hb07905b5f1ed4cb6bf80fd9cfd37ee0eG.jpg","height":800,"id":1,"label":"background","left":0,"src":"https://global.mabangerp.com/image/slider/worldfirst.png","top":0,"type":"image","width":800,"zIndex":1},{"backgroundColor":"#ff0431","color":"#fefafa","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":83,"id":2,"label":"bg","left":128,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":1,"textAlign":"left","top":57,"type":"text","width":215,"zIndex":2},{"backgroundColor":"transparent","color":"#fefafa","content":"ANT GROUP","contents":[],"fontFamily":"Arimo-Regular","fontSize":24,"height":71,"id":3,"label":"element","left":134,"letterSpacing":0,"lineHeight":24,"ocrContent":"蚂蚁集团ANT GROUP","pairId":1,"textAlign":"left","top":63,"type":"text","width":203,"zIndex":8},{"backgroundColor":"#ff0431","color":"#fefafa","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":59,"id":4,"label":"bg","left":388,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":2,"textAlign":"left","top":55,"type":"text","width":164,"zIndex":3},{"backgroundColor":"transparent","color":"#fefafa","content":"Miles exchange","contents":[],"fontFamily":"Arimo-Regular","fontSize":22,"height":47,"id":5,"label":"element","left":394,"letterSpacing":0,"lineHeight":22,"ocrContent":"万里汇","pairId":2,"textAlign":"left","top":61,"type":"text","width":152,"zIndex":9},{"backgroundColor":"#ff0331","color":"#feeff2","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":39,"id":6,"label":"bg","left":390,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":3,"textAlign":"left","top":107,"type":"text","width":230,"zIndex":4},{"backgroundColor":"transparent","color":"#feeff2","content":"A wholly-owned subsidiary of Ant Financial Group","contents":[],"fontFamily":"Arimo-Regular","fontSize":12,"height":27,"id":7,"label":"element","left":396,"letterSpacing":0,"lineHeight":12,"ocrContent":"蚂蚁集团旗下全资子公司","pairId":3,"textAlign":"left","top":113,"type":"text","width":218,"zIndex":10},{"backgroundColor":"#ff012e","color":"#fefcfc","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":183,"id":8,"label":"bg","left":91,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":4,"textAlign":"left","top":256,"type":"text","width":613,"zIndex":5},{"backgroundColor":"transparent","color":"#fefcfc","content":"Wan Li received lightning delivery cross-border settlement without foreign exchange loss","contents":[],"fontFamily":"Arimo-Regular","fontSize":30,"height":171,"id":9,"label":"element","left":97,"letterSpacing":0,"lineHeight":30,"ocrContent":"万里收款闪电达跨境结算无汇损","pairId":4,"textAlign":"left","top":262,"type":"text","width":601,"zIndex":11},{"backgroundColor":"#ff022e","color":"#fef0f1","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":58,"id":10,"label":"bg","left":103,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":5,"textAlign":"left","top":454,"type":"text","width":363,"zIndex":6},{"backgroundColor":"transparent","color":"#fef0f1","content":"Cap at 0.3% rate","contents":[],"fontFamily":"Arimo-Regular","fontSize":31,"height":46,"id":11,"label":"element","left":109,"letterSpacing":0,"lineHeight":31,"ocrContent":"0.3%费率封顶","pairId":5,"textAlign":"left","top":460,"type":"text","width":351,"zIndex":12},{"backgroundColor":"#f5f5f6","color":"#2c2c2c","content":"","fontFamily":"Arimo-Regular","fontSize":12,"height":53,"id":12,"label":"bg","left":151,"letterSpacing":0,"lineHeight":12,"ocrContent":"","pairId":6,"textAlign":"left","top":613,"type":"text","width":210,"zIndex":7},{"backgroundColor":"transparent","color":"#2c2c2c","content":"Speed registration","contents":[],"fontFamily":"Arimo-Regular","fontSize":24,"height":41,"id":13,"label":"element","left":157,"letterSpacing":0,"lineHeight":24,"ocrContent":"极速注册","pairId":6,"textAlign":"left","top":619,"type":"text","width":198,"zIndex":13}],"height":800,"left":0,"opacity":1,"scale":1,"top":0,"type":"stage","width":800}],
            locale: 'zh-cn', // zh-cn 或者 en 或者 ko 或者 ja，新版编辑器的界面语种。默认值为zh-cn
          	// downloadable: true, // 默认为true, 如果是false的时候，则不会显示 下载图片 按钮，仅新版本生效
          	// submitText: '完成编辑', // 提交按钮的文案，默认根据语种切换
          	// downloadText: '下载图片', // 下载按钮的文案，默认根据语种切换
          	
        }

        function onCompleted(data) {
            console.log('onCompleted', data);
        }

        function onSubmit(data) {
            console.log('onSubmit', data);
        }

        function postMessage(data) {
            iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
        }

        function receiveMessage(event) {
            if (event.data && !event.data.type) {
                const postData = JSON.parse(event.data);
                const { type, data } = postData;
                switch (type) {
                    case 'base64':
                        onCompleted(data);
                        break;
                    case 'submit':
                        onSubmit(data);
                        break;
                    case 'autoHeight': {
                        iFrame.style.height = data.editorHeight + 'px';
                        break;
                    }
                    default:
                        break;
                }
            }
        }

        iFrame.onload = () => {
            window.addEventListener('message', receiveMessage, true);
            postMessage(mockData);
        }
    </script>
</body>