如何在将图像上传到服务器之前调整角度2的大小?

amo*_*mol 12 angular

我想调整大小为74 x 74的图像,我使用ng2-uploader指令上传图像.如果有任何其他指令我可以用来达到我的要求,请建议我.谢谢

rin*_*usu 6

看看ng2-imageupload.它使您可以在上传图像之前自动调整图像大小.

只需修改模板并在输入字段中添加一些指令,并为图像上传添加隐藏的图像标记:

<img [src]="src" [hidden]="!src">
<input type="file" imageUpload (imageSelected)="selected($event)" [resizeOptions]="resizeOptions">
Run Code Online (Sandbox Code Playgroud)

在组件中添加调整大小选项和selected方法:

src: string = "";
resizeOptions: ResizeOptions = {
    resizeMaxHeight: 74,
    resizeMaxWidth: 74
};

selected(imageResult: ImageResult) {
    this.src = imageResult.resized 
      && imageResult.resized.dataURL
      || imageResult.dataURL;
}
Run Code Online (Sandbox Code Playgroud)

  • 指令名称"image-upload"已更改为"imageUpload".使用前者时出错了.被告知 ;) (2认同)

Par*_*ain 6

是的,我们可以ng2-img-cropper在上传之前用于裁剪图像,也可以根据您的要求自定义尺寸,您只需要从节点安装名为ng2-img-cropper的包

npm install ng2-img-cropper --save

而不仅仅是通过导入使用组件

import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-农作物';

Working plunker here 有关详情,请参阅此处,