javascript - 如何访问 photoeditorsdk 的导出方法以获取图像 url？

Question

我无法从 photoedior sdk 获取更新的图像 url。

这是用于将 photoeditor sdk 与 angular 集成

let templateStr: string = `
  <ngui-react
    [reactComponent]="reactComponent"
    [reactProps]="reactProps">
  </ngui-react>
`;

export class PhotoEditorSDKDesktopUIComponent {
    reactComponent: React.Component;
    @Input() imageUrl;
    reactProps: any;
    @Input() license: string = license;
    constructor() {}

  ngOnChanges(changes): void {
    let firstNumber, secondNumber;
    const { derivativeUrl, sequence, name, code } = this.imageUrl;
    if (code) {
      [firstNumber, secondNumber] = code && code.split('X');
    }
    const image = new Image();
    image.crossOrigin = 'Anonymous';

    const defaultProps = {
      // license: license,
      assets: {
        baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
      },
      style: {
        width: 1024,
        height: 576
      },
      editor: {
        enableSave: true,
        enableExport: true,
        forceCrop: false,
        image: image,
        export: {
          fileBasename: 'pesdk-doc',
          format: 'image/jpeg',
          type: 'data-url',
          download: false
        },
        save: {
          fileBasename: 'pesdk-doc',
          download: false,
          format: 'text/json',
          image: true
        },
        controlsOptions: {
          transform: {
            categories: [
              {
                identifier: name,
                defaultName: code,
                ratios: [
                  {
                    identifier: name, 
                    defaultName: name, 
                    ratio: Number(firstNumber) / Number(secondNumber)
                  }
                ]
              }
            ]
          },
          replaceCategories: false
        }
      }
    };

    const licenseProps = {
      license: this.license
    };
    defaultProps.editor.image['src'] = s3Prefix + derivativeUrl;
    this.reactComponent = PhotoEditorDesktopUI.ReactComponent; 
    this.reactProps = { ...defaultProps, ...licenseProps };
  }
}

我不确定在哪里编写导出函数以获取 photoeditorsdk 的响应？任何形式的帮助都会很棒，谢谢！not event 也无法访问 save 方法方法，也不确定哪里出错了。

Answer 1

Try adding the following to defaultProps:

ref: component => {
  this.editor = component.ui;
}

(Where editor is defined as editor: PhotoEditorDesktopUI)

Now you can export like this:

this.editor.export(false).then(data => {
  // do something with the data
});