Tôi muốn đổi kích thước hình ảnh với kích thước 74 x 74, tôi đang sử dụng chỉ dẫn ng2-uploader để tải lên hình ảnh. Nếu có bất kỳ chỉ thị nào khác tôi có thể sử dụng để đạt được yêu cầu của mình, vui lòng đề nghị tôi. Cảm ơnLàm thế nào để thay đổi kích thước hình ảnh trong góc 2 trước khi tải nó lên máy chủ?
Hãy xem ng2-imageupload. Nó cho phép bạn tự động thay đổi kích thước hình ảnh trước khi nó được tải lên.
Chỉ việc điều chỉnh mẫu của bạn và thêm một vài chỉ đến lĩnh vực đầu vào và thêm thẻ hình ảnh ẩn cho hình ảnh tải lên:
<img [src]="src" [hidden]="!src">
<input type="file" image-upload (imageSelected)="selected($event)" [resizeOptions]="resizeOptions">
Trong thành phần của bạn bạn thêm các tùy chọn thay đổi kích thước và selected phương pháp:
src: string = "";
resizeOptions: ResizeOptions = {
resizeMaxHeight: 74,
resizeMaxWidth: 74
};
selected(imageResult: ImageResult) {
this.src = imageResult.resized
&& imageResult.resized.dataURL
|| imageResult.dataURL;
}
Có thể sử dụng ng2-img-cropper để cắt ảnh trước khi tải lên, bạn có thể tùy chỉnh kích thước theo yêu cầu của mình, bạn chỉ cần cài đặt gói có tên là ng2-img-cropper từ nút.210 sử dụng
NPM cài đặt ng2-img-crop --save
hơn là chỉ sử dụng các thành phần bằng cách nhập
import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img- giống chim bồ câu ';
Working plunker here Để biết thêm thông thấy ở đây,
Cám ơn trả lời. Tính năng này có cung cấp tính năng kéo và thả không? – amol
Không, nhưng bạn có thể sử dụng nó với 'ng2-uploader' của bạn, nó cung cấp tính năng kéo và thả nếu tôi nhớ chính xác. – rinukkusu
Bạn không biết liệu có thể có nhiều hơn một hình ảnh? ..Tôi có nghĩa là tôi đã có một lĩnh vực đầu vào với khả năng để chọn nhiều hình ảnh, vì vậy tôi tự hỏi những gì để sử dụng để thay đổi kích thước và giảm kích thước hình ảnh. –