如何访问photoeditorsdk的导出方法以获取图像URL?

时间:2019-01-14 06:33:50

标签: javascript angular photoeditorsdk

我无法从photoedior sdk获取更新的图片网址。

这是用于将带角度的光电编辑器sdk集成


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的响应? 任何帮助都会很棒,谢谢! 无法事件也无法访问save方法的方法,也不能确定哪里出了问题。

1 个答案:

答案 0 :(得分:0)

尝试将以下内容添加到defaultProps

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

(其中editor被定义为editor: PhotoEditorDesktopUI的地方)

现在您可以像这样导出:

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