[英]How to crop image and upload using ng-file-upload?
This is my view.这是我的看法。
<div class="btn btn-primary"
ng-model="file" name="file"
accept="image/*"
ngf-select ngf-pattern="'image/*'"
ngf-min-height="100" ngf-min-width="100"
ngf-resize="{width: 400, height: 600}"
ngf-max-size="20MB"
ngf-multiple="false">Select
</div>
<input type="file" img-cropper-fileread image="cropper.sourceImage"/>
<div>
<canvas width="500" height="300" id="canvas"
image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage"
crop-width="400" crop-height="200" touch-radius="30"
keep-aspect="true" crop-area-bounds="bounds">
</canvas>
</div>
<div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
<div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}"/></div>
<button type="submit" ng-click="submit()">submit</button>
This is my controller.这是我的控制器。
$scope.cropper = {};
$scope.cropper.sourceImage = null;
$scope.cropper.croppedImage = null;
$scope.bounds = {};
$scope.bounds.left = 0;
$scope.bounds.right = 0;
$scope.bounds.top = 0;
$scope.bounds.bottom = 0;
$scope.url = 'http://192.168.0.101/mysite/uploadurl';
$scope.submit = function() {
$scope.upload($scope.file);
};
// upload on file select or drop
$scope.upload = function (file) {
Upload.upload({
url: $scope.url,
data: {file: file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
});
};
I can upload my ng-model="file" but that not cropped image.我可以上传我的 ng-model="file" 但那不是裁剪的图像。
How to insert my cropped image into my data:{file:file}.如何将裁剪后的图像插入我的数据:{file:file}。
Pass the newly cropped Image in your function.在您的函数中传递新裁剪的图像。
<button type="submit" ng-click="submit(cropper.croppedImage)">submit</button>
Now change the submit function accordingly:现在相应地更改提交功能:
$scope.submit = function(croppedImage) {
$scope.upload(croppedImage);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.