Angular2调整大小输入图像

我想要建立一个文件上传（基于Angular2 - Display image）与angular2上传原始图像，但显示调整大小的图像作为缩略图预览。Angular2调整大小输入图像

在上传之前，图像必须显示为文件输入字段下方的缩略图。现在图像元素显示一个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" >

有没有办法来调整与角度的图像没有或低质量的损失？

来源

2017-05-30 4ern

不，你不能在33px中挤出一个大图像而不会遭受一些质量损失。 – toskv

你可以使用画布来获得更好的图像处理选项 –

是的，如上所述，你不能对质量做太多的事情。但是，如果可能的话，我会推荐你使用'svg'格式。它的质量和分辨率比其他格式如'jpg'和'png'具有更好的尺寸。 –

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

来源

2017-05-30 17:48:55

Angular2调整大小输入图像

回答

相关问题