0

我创建了一个带有 Onsen.ui2 框架的 Monaca 应用程序，我在其中使用来自 ng2-photo-editor https://www.npmjs.com/package/ng2-photo-editor的 PhotoEditorSDK 库。

在 PhotoEidtComponenet.ts（就我而言）文件中，我需要指定其资产文件夹的绝对路径。请检查我的项目视图层次结构的附加图像。

我尝试了不同的路径，如“../../utlis/PhotoEditorSdk/assets”等，但资产内的图标没有加载。

这是 assets: { baseUrl: './assets' } 我需要指定绝对路径的地方。

下面是我如何尝试加载集成库的代码

import {Component, ViewChild, ViewEncapsulation, EventEmitter, ElementRef} from '@angular/core';
const PhotoEditorSDK = require('../../utils/PhotoEditorSDK/js/PhotoEditorSDK.js');
const PhotoEditorReactUI = require('../../utils/PhotoEditorSDK/js/PhotoEditorReactUI.js');
const UnsplashProvider = require('../../utils/PhotoEditorSDK/js/UnsplashProvider.js');

@Component({
      selector: 'ons-page[page]',
    encapsulation: ViewEncapsulation.None,
    template: `
        <div #host id="photo-host" style="min-height: 100px; min-width:100px"></div>
        <img src = "app/img/test.jpg">
        <div class="actions">
                 <a class="btn white-btn active" (click)="cancelClick()">Discard</a>
            <a class="btn white-btn pull-right" (click)="saveClick()">Save</a>
          </div>`,
        styles: [require('../../utils/PhotoEditorSDK/css/PhotoEditorReactUI.css') ]

})

export class PhotoEdit{

  @ViewChild('host') host: any;
  el: ElementRef;
  editor: any;
  propagateChange = (_: any) => { };


  constructor(el: ElementRef) {
      this.el = el;
  }

  ngOnInit() {
      // this.createEditor();
  }

  ngAfterViewInit() {
    setTimeout(() => this.createEditor(), 1);
  }

  ngOnDestroy() {
      if (this.editor) {
          this.editor.dispose();
      }
  }

  ngOnChanges(changes: any) {
  //        console.log(changes);
      if (this.editor) {
          this.editor.dispose();
      }
      this.createEditor();
      this.propagateChange(changes);
  }

  writeValue(value: any) {
      //console.log(value);
  //        if (this.editor) {
  //            if (value && value !== '') {

  //            }
  //        }
  }
  registerOnChange(fn: any) {
      this.propagateChange = fn;
  }
  registerOnTouched(fn: any) { }

  createEditor() {
      let myImage = new Image();
      myImage.crossOrigin = 'anonymous';
      myImage.setAttribute('crossOrigin', 'anonymous');
          this.editor = new PhotoEditorSDK.UI.ReactUI({
              container: this.host.nativeElement,
              logLevel: 'info',
            title: '',
            showTopBar: false,
            showCloseButton: false,
            editor: {
                image: myImage
            },
            photoRoll: {
                provider: UnsplashProvider
            },
            assets: {
                baseUrl: './assets'

            },
            ui: {
                enabled: true,
                showExportButton: true,
                export: {
                    type: PhotoEditorSDK.RenderType.DATAURL,
                    download: false
                }
            },
            responsive: true,
            language: 'en'
          });
      myImage.src = "./test.jpg";
  }

  saveClick() {
      this.editor.export(false)
          .then(result => {
              // this.saveImageEvent.emit(result);
          });
  }

  cancelClick() {
      // this.cancelEvent.emit();
  }
}

我试图加载一个简单的图像

任何帮助表示赞赏。感谢提前在此处输入图片描述

4

0 回答 0