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

我需要一個幫助。我使用Angular.js（i.e-ngFileUpload）上傳圖像。在這裏我需要根據所需的高度和寬度裁剪圖像。我正在解釋我的代碼下面。如何使用Angular.js添加裁剪圖像

<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模塊。請幫助我。

來源

2015-12-12 satya

如果你讀[ngFileUpload（https://github.com/danialfarid/ng-file-upload），在功能列表它提到裁剪的README文件和有一個示例jsfiddle用於將它與[ngImgCrop]（https://github.com/alexk111/ngImgCrop）集成到裁剪圖像：http://jsfiddle.net/xxo3sk41/1/ – danial

您可以使用此ngCrop directive.

來源

2015-12-12 06:51:56

讓我來實現這個，然後我將確認您。 – satya

嘿，它工作？ –

其工作正常，但一些問題。我需要一些驗證這個圖像領域。 – satya

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

回答

相關問題