Как изменить размер изображения в angular 2 перед загрузкой его на сервер?

Я хочу изменить размер изображения размером 74 x 74, я использую директиву ng2-uploader для загрузки изображения. Если есть какая-либо другая директива, которую я могу использовать для достижения моего требования, пожалуйста, предложите мне. Благодаря

Ответ 1

Да, мы можем использовать ng2-img-cropper для вышивания изображения перед загрузкой, вы также можете настроить размер в соответствии с вашим требованием, вам просто нужно установить пакет с именем ng2-img-cropper из node используя

npm установить ng2-img-cropper --save

чем просто использовать компонент, импортируя

import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img- провалится ';

Рабочий плункер здесь Для получения дополнительной информации см. Здесь

https://www.npmjs.com/package/ng2-img-cropper

Ответ 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;
}