如何使ngimgcrop角拉伸dafault作物部分

Question

Can I make crop area of ngimgcrop stretch to fullest of the width of image. 我可以使ngimgcrop的裁切区域拉伸到最大图像宽度吗？ I simply want when I click on browse the crop portion which we drag need to be stretch to the fullest width or height. 我只是想在单击浏览所拖动的裁剪部分时将其拉伸到最大宽度或高度。

Here is of screenshot exactly what I want: 这正是我想要的屏幕截图：

I have tried with ng-img-crop.js but unable to find solution. 我尝试使用ng-img-crop.js但找不到解决方案。

 angular.module('app', ['ngImgCrop']) .controller('Ctrl', function($scope) { $scope.myImage=''; $scope.myCroppedImage=''; var handleFileSelect=function(evt) { var file=evt.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (evt) { $scope.$apply(function($scope){ $scope.myImage=evt.target.result; }); }; reader.readAsDataURL(file); }; angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect); });

 .cropArea { background: #E4E4E4; overflow: hidden; width:500px; height:350px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js"></script> <link href="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.css" rel="stylesheet" /> <body ng-app="app" ng-controller="Ctrl"> <div>Select an image file: <input type="file" id="fileInput" /></div> <div class="cropArea"> <img-crop image="myImage" result-image="myCroppedImage" area-type="square" result-image-format="image/jpeg" area-min-size="150"></img-crop> </div> <div>Cropped Image:</div> <div><img ng-src="{{myCroppedImage}}" /></div> </body>

http://jsfiddle.net/rw6q9/2579/ http://jsfiddle.net/rw6q9/2579/

Answer 1

I'm afraid that you can't do this with this plugin (Also, you can only crop a square area so in the most of the cases, you can't set the area as full width and height). 恐怕您无法使用此插件执行此操作（此外，您只能裁剪一个正方形区域，因此在大多数情况下，您无法将该区域设置为全角和全角）。

You can use ngCropper - a angular module based on the very good jQuery plugin cropper . 您可以使用ngCropper -基于非常不错的jQuery插件角模块cropper 。

This plugin has much more options so you can customize it exactly as you want. 该插件具有更多选项，因此您可以完全根据需要自定义它。

Like this (See it in Full page mode or in the bin : 像这样（在整页模式或垃圾箱中查看它：

 var app = angular.module('app', ['ngCropper']); app.controller('Main', function($scope, $timeout, Cropper) { var file, data; /** * Method is called every time file input's value changes. * Because of Angular has not ng-change for file inputs a hack is needed - * call `angular.element(this).scope().onFile(this.files[0])` * when input's event is fired. */ $scope.onFile = function(blob) { Cropper.encode((file = blob)).then(function(dataUrl) { $scope.dataUrl = dataUrl; $timeout(showCropper); // wait for $digest to set image's src }); }; /** * Croppers container object should be created in controller's scope * for updates by directive via prototypal inheritance. * Pass a full proxy name to the `ng-cropper-proxy` directive attribute to * enable proxing. */ $scope.cropper = {}; $scope.cropperProxy = 'cropper.first'; /** * When there is a cropped image to show encode it to base64 string and * use as a source for an image element. */ $scope.preview = function() { if (!file || !data) return; Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) { ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl; }); }; /** * Use cropper function proxy to call methods of the plugin. * See https://github.com/fengyuanchen/cropper#methods */ $scope.clear = function(degrees) { if (!$scope.cropper.first) return; $scope.cropper.first('clear'); }; $scope.scale = function(width) { Cropper.crop(file, data) .then(function(blob) { return Cropper.scale(blob, {width: width}); }) .then(Cropper.encode).then(function(dataUrl) { console.log('bbb'); ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl; }); } /** * Object is used to pass options to initalize a cropper. * More on options - https://github.com/fengyuanchen/cropper#options */ $scope.options = { maximize: true, aspectRatio: 2 / 1, crop: function(dataNew) { data = dataNew; }, preview: '.preview-container' }; /** * Showing (initializing) and hiding (destroying) of a cropper are started by * events. The scope of the `ng-cropper` directive is derived from the scope of * the controller. When initializing the `ng-cropper` directive adds two handlers * listening to events passed by `ng-cropper-show` & `ng-cropper-hide` attributes. * To show or hide a cropper `$broadcast` a proper event. */ $scope.showEvent = 'show'; $scope.hideEvent = 'hide'; function showCropper() { $scope.$broadcast($scope.showEvent); } function hideCropper() { $scope.$broadcast($scope.hideEvent); } });

 .img-preview { float: left; margin-right: 10px; margin-bottom: 10px; overflow: hidden; } .preview-lg { width: 263px; height: 148px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css" rel="stylesheet" /> <link href="https://cdn.rawgit.com/koorgoo/ngCropper/master/dist/ngCropper.all.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.js"></script> <script src="https://cdn.rawgit.com/koorgoo/ngCropper/master/dist/ngCropper.all.js"></script> <div ng-app="app" ng-controller="Main"> <input type="file" onchange="angular.element(this).scope().onFile(this.files[0])"> <div ng-if="dataUrl" class="img-container"> <img ng-if="dataUrl" ng-src="{{dataUrl}}" width="800" ng-cropper ng-cropper-proxy="cropperProxy" ng-cropper-show="showEvent" ng-cropper-hide="hideEvent" ng-cropper-options="options"> <div class="preview-container preview-lg img-preview"> <img /> </div> </div> </div>

如何使ngimgcrop角拉伸dafault作物部分

问题描述

1 个解决方案

解决方案1
1 2016-02-22 06:08:43

如何使ngimgcrop角拉伸dafault作物部分

问题描述

1 个解决方案

解决方案1 1 2016-02-22 06:08:43

解决方案1
1 2016-02-22 06:08:43