如何使用Angular.js添加裁剪图像

时间:2015-12-12 06:44:09

标签: javascript angularjs image ng-file-upload

我需要一个帮助。我正在使用Angular.js(i.e-ngFileUpload)上传图片。我需要根据所需的高度和宽度裁剪图像。我正在解释下面的代码。

<input type="file" class="filestyle form-control" data-size="lg" name="uploadme" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);">

下面给出了控制器端代码。

$scope.onFileSelect = function($files) {
 console.log('file details',$files);
 fileURL=$files;
}

在正常上传中,我收到以下图像格式的控制台消息。

$ngfName: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
name: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
size: 16903
type: "image/png"

这里我需要如果任何图像与所需的高度和宽度不匹配,因为它会要求裁剪该图像,再次裁剪后,图像将以适当的格式设置在文件输入字段内,如上所示。这就是我使用angular.js ngFileUpload module.Please帮助我。

1 个答案:

答案 0 :(得分:1)

您可以使用此ngCrop directive.