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 来更改图像大小，例如图像元素的宽度为 33px，图像质量非常差:

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

有没有办法在没有或低质量损失的情况下调整图像的 Angular ？

Answer 1

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