Я хочу изменить размер изображения размером 74 x 74, я использую директиву ng2-uploader для загрузки изображения. Если есть какая-либо другая директива, которую я могу использовать для достижения моего требования, пожалуйста, предложите мне. Благодаря
Как изменить размер изображения в angular 2 перед загрузкой его на сервер?
Ответ 1
Да, мы можем использовать ng2-img-cropper
для вышивания изображения перед загрузкой, вы также можете настроить размер в соответствии с вашим требованием, вам просто нужно установить пакет с именем ng2-img-cropper из node
используя
npm установить ng2-img-cropper --save
чем просто использовать компонент, импортируя
import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-
провалится ';
Рабочий плункер здесь Для получения дополнительной информации см. Здесь
Ответ 2
Посмотрите ng2-imageupload. Это позволяет вам автоматически изменять размер изображения до его загрузки.
Просто измените свой шаблон и добавьте несколько директив в поле ввода и добавьте скрытый тег изображения для загрузки изображения:
<img [src]="src" [hidden]="!src">
<input type="file" image-upload (imageSelected)="selected($event)" [resizeOptions]="resizeOptions">
В вашем компоненте вы добавляете параметры изменения размера и метод selected
:
src: string = "";
resizeOptions: ResizeOptions = {
resizeMaxHeight: 74,
resizeMaxWidth: 74
};
selected(imageResult: ImageResult) {
this.src = imageResult.resized
&& imageResult.resized.dataURL
|| imageResult.dataURL;
}