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調整大小輸入圖像

回答

相關問題