Question

我试图使用ngx-img-cropper控件：https://github.com/web-dave/ngx-img-cropper。

如果我使用Cropper自己的文件输入控件，填充画布工作正常。但是，我无法弄清楚如何通过其他方式将图像选入组件。

为<img>元素和<img-cropper>组件声明视图子项：

@ViewChild("image")
private _image: HTMLImageElement;

@ViewChild("cropper", undefined)
private _cropper: ImageCropperComponent;

在(load)元素的<img>事件处理程序中，我尝试像这样设置Cropper的图像。

if (this._cropper) {
    this._cropper.setImage(this._image);
}

但是，裁剪器的画布永远不会随图像更新;虽然调用(imageSet)事件处理程序。

除了使用<img>标记之外，我还试图以编程方式从服务器检索图像并加载它，但由于当FileReader加载时，Cropper组件不存在，因此失败了发生LoadEnd事件。

private _imageBase64: string;

// Also tried ngAfterViewInit, but failed the same way.
public ngOnInit() {
    // ...
    this._imageService.GetImage()
        .subscribe({
            "next": data => { this.createImageFromBlob(data); }
        });
}

private createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    // also tried the onload event
    reader.onloadend = (event: ProgressEvent) => {
        this._imageBase64 = reader.result;
        this._cropper.inputImage = this._imageBase64;
    }
    reader.readAsDataURL(image);
}

有关如何将服务器提供的图像以编程方式加载到ngx-img-cropper组件进行编辑的任何建议？

修改

this._cropper不存在，因为组件的元素位于*ngIf受控元素中，其中条件评估为false。 StackOverflow还有其他问题和答案来解决这个问题。

因此，在解决了上述问题后，Cropper现在填充了我的图像，我可以拖动选择角和整个选择。但是，ngx-img-cropper组件本身现在会产生错误：

TypeError: Unable to set property 'image' of undefined or null reference

组件使用的属性似乎缺少值...（这可能是一个错误，或者我只是无法正确初始化组件）。

Answer 1

虽然我无法以编程方式提取<img>代码引用并将其应用于图像裁剪器，但修复*ngIf问题后，AfterViewInit生命周期钩子中不存在裁剪器，我能够以编程方式设置图像，方法是动态创建Image实例，将其src属性设置为FileReader的输出，然后调用setImage()那个动态的Image实例。

photoEdit._imageBase64 = reader.result;
this._image = new Image();
this._image.src = photoEdit._imageBase64;
photoEdit._cropper.setImage(this._image);

对于其他错误，通过在图像裁剪器组件的image事件处理程序中手动填充imageSet属性来解决此错误。我怀疑这是组件中的一个错误，因为它应该在调用setImage方法时自动执行此操作。

public onImageSet(image: any) {
    this._cropper.image = image;
}

如何以编程方式在ngx-img-cropper组件中设置图像？

修改

1 个答案: