Angular2 调整输入图像的大小

标签 angular typescript base64 filereader

我想使用 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 ?

最佳答案

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

关于Angular2 调整输入图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44259269/

相关文章:

javascript - <a> 元素不会重定向到另一个页面且不可点击

angular - 在捕获到故障后,如何允许我的 HTTP 请求继续通过我的应用程序传播?

reactjs - 在私有(private)路径中重新加载,将用户带到登录页面

netbeans - 未找到符号,但已导入库

ios - 如何快速将base64转换为NSDATA

base64 - 为什么 ToBase64String 将 16 字节字符串更改为 24 字节

javascript - 在 Angular 8 中每次点击时始终仅显示三个级别的 Highcharts Sunburst

angular - TS2532 : Object is possibly 'undefined'

angular - Angular 构建中的 AOT 模式添加 `fr.` 或 `en.` 作为 transloco 中翻译键的前缀

angular - q.all for angular2 observables