Angular2调整输入图像的大小

Question

我想使用angular2构建文件上传（基于Angular2 - Display image），上传原始图像但显示调整大小的图像作为缩略图预览。

在上传之前，图像必须在文件输入字段下方显示为缩略图。现在图像元素显示一个base64字符串，一切正常......但是！

getInput(fileInput) {

    const reader  = new FileReader();

    reader.onload = ((e: any) => {
        this.logo = e.target.result;
    });

    reader.readAsDataURL(fileInput.target.files[0]);

}

如果我想通过添加内嵌css来更改图像大小，例如宽度为33像素到图像元素，图像的质量非常糟糕：

<input type="file" class="form-control" (change)="getInput($event)" name="qr.logo"/>
<img [src]="logo" [width]="33" >

有没有办法用角度调整图像大小没有或有低质量损失？

Answer 1

您可以使用angular2-img-cropper包来调整图像大小。 https://github.com/cstefanache/angular2-img-cropper