Voglio ridimensionare l'immagine con una dimensione di 74 x 74, sto usando la direttiva ng2-uploader per caricare l'immagine. Se c'è qualche altra direttiva che posso usare per raggiungere il mio requisito, per favore suggeriscimi. GrazieCome ridimensionare l'immagine in angular 2 prima di caricarla sul server?
Dai un'occhiata allo ng2-imageupload. Ti consente di ridimensionare automaticamente l'immagine prima che venga caricata.
Basta modificare il modello e aggiungere qualche direttive al campo di input e aggiungere il tag di immagine nascosta per il caricamento delle immagini:
<img [src]="src" [hidden]="!src">
<input type="file" image-upload (imageSelected)="selected($event)" [resizeOptions]="resizeOptions">
nel componente si aggiunge alle opzioni di ridimensionamento e il metodo selected:
src: string = "";
resizeOptions: ResizeOptions = {
resizeMaxHeight: 74,
resizeMaxWidth: 74
};
selected(imageResult: ImageResult) {
this.src = imageResult.resized
&& imageResult.resized.dataURL
|| imageResult.dataURL;
}
Sì possiamo usare ng2-img-cropper per croping l'immagine prima di caricare anche è possibile personalizzare la dimensione secondo il vostro requisito, è sufficiente installare il pacchetto chiamato come NG2-img-cropper dal nodo utilizzando
npm installare ng2-img-cropper --save
che semplicemente utilizzare il componente importando
import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img- cropper ';
Working plunker here Per maggiori informazioni vedi qui,
Grazie per la risposta. Fornisce funzionalità di trascinamento e rilascio? – amol
No, ma puoi usarlo con il tuo 'ng2-uploader' che fornisce il drag and drop se non ricordo male. – rinukkusu
Non sai se è possibile per più di un'immagine? Voglio dire che ho un campo di input con possibilità di scegliere più immagini, quindi mi chiedo cosa usare per ridimensionare e ridurre le dimensioni dell'immagine. –