Question

我可以将ngimgcrop的裁剪区域拉伸至图像宽度的最大值。我只是想当我点击浏览我们拖动的裁剪部分时需要拉伸到最大的宽度或高度。

以下是我想要的截图：

我尝试使用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/

Answer 1

我担心你不能用这个插件做到这一点（另外，你只能裁剪一个方形区域，所以在大多数情况下，你不能将区域设置为全宽和< / strong>身高）。

你可以使用ngCropper - 一个基于非常好的jQuery插件cropper的角度模块。

此插件有更多选项，因此您可以根据需要自定义它。

像这样（在完整页面模式或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>

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

1 个答案: