angular-croppie-module 无法正确导入 @type/croppie答案

【问题标题】：angular-croppie-module fail to import @type/croppie properlyangular-croppie-module 无法正确导入 @type/croppie
【发布时间】：2018-09-01 16:28:27
【问题描述】：

我是 Angular 5 的新手，正在努力在我的应用程序中实现 angular-croppie-module。我试图在模块 github 上有一些答案，但没有成功。似乎croppie.directive.d.ts 只能导入“Croppie”命名空间而不是类。结果，一旦我到达带有我得到的模块的页面

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_croppie___default.a 不是构造函数

我创建了一个 github 存储库来展示问题的简单演示 https://github.com/ErwinSanquer/croppie-demo

谢谢，

【问题讨论】：

标签： angular5 croppie

【解决方案1】：

我正在使用 angular4 并发现croppie 很容易单独使用，然后您可以使用croppie 文档来找出要调用的方法。我刚刚做了：

npm 安装croppie

然后创建一个组件来使用它（这里是组件的简化版本）：

import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
import { Croppie } from 'croppie/croppie'; // Reference: http://foliotek.github.io/Croppie/

@Component({
  selector: 'image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.scss']
})
export class ImageUploadComponent implements OnInit, OnDestroy {
  uploadElement: any;
  croppie: any;
  imageChanged: boolean = false;

  constructor() { }

  ngOnInit() {
    this.initCroppie();
    this.initFileUpload();
  }

  initCroppie() {
    const cropElement = document.getElementById('imageUploadItem');
    this.croppie = new Croppie(cropElement, {
      viewport: { width: 200, height: 200, type: 'circle' },
      boundary: { width: 200, height: 200 },
      enableOrientation: true
    });

    let preloadedImageUrl = Constants.DEFAULT_PROFILE_IMG_URL;

    this.croppie.bind({
      url: preloadedImageUrl,
      zoom: 0
    });
  }

  initFileUpload() {
    this.uploadElement = document.getElementById('fileUploadInput');
    this.uploadElement.addEventListener('change', this.onFileUpload.bind(this));
  }

  onFileUpload() {
    if (this.uploadElement.files && this.uploadElement.files.length > 0) {
      this.imageChanged = true;

      const file = this.uploadElement.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = ((event: any) => {
        this.croppie.bind({
          url: event.target.result
        });
      });
    }
  }

  rotateLeft() {
    this.croppie.rotate(90);
    this.imageChanged = true;
  }

  rotateRight() {
    this.croppie.rotate(-90);
    this.imageChanged = true;
  }

  getCroppieImage(quality: number, numCalls: number): Promise<any> {
    return this.croppie.result({
      type: 'blob',
      size: {
        width: 500,
        height: 500
      },
      format: 'jpeg',
      quality: quality,
      circle: false
    })
      .then((imageDataBlob) => {
        // If image size is still too large just call result again with lower quality
        if (imageDataBlob.size > 500000 && numCalls < 3) {
          quality = quality - 0.1;
          numCalls++;
          return this.getCroppieImage(quality, numCalls);
        } else {
          return imageDataBlob;
        }
      });
  }

  ngOnDestroy() {
    this.uploadElement.removeEventListener('change', this.onFileUpload);
  }
}

确保模板有一个 id='imageUploadItem' 的 div 供作物居住，如果你让用户上传图片（就像我在上面的组件中所做的那样），请确保你有一个 type=file 的输入id='fileUploadInput'。

【讨论】：

我使用的是 angular-croppie 而不是直接使用croppie，这可能是一个糟糕的选择。无论如何，angular-croppie 已经更新以纠正问题。谢谢你的回答。

【解决方案2】：

更新：

该问题已在 0.0.6 版本中修复 https://github.com/gatimus/angular-croppie/issues/4

【讨论】：

欢迎来到 Stack Overflow！虽然链接是分享知识的好方法，但如果它们在未来被破坏，它们将无法真正回答问题。将回答问题的链接的基本内容添加到您的答案中。如果内容太复杂或太大而无法在此处放置，请描述所提出解决方案的总体思路。请记住始终保留指向原始解决方案网站的链接引用。见：How do I write a good answer?