你如何使用ng-file-upload和ngImgCrop？

Question

我想創建一個文件上傳器，我可以將圖片上傳到我的UI，裁剪它然后發送到我的服務器。 我一直在使用ngFileUpload上傳文件，它運行良好。 我按照指示將ngImgCrop添加到我的項目中，並將http://jsfiddle.net/danialfarid/xxo3sk41/590/中的html和css導入到我的項目中以找出如何使用它。 乍看之下一切看起來都不錯，但是當我從硬盤驅動器中選擇一張圖片時，它不會出現在裁剪區域。 可能隱藏某些東西還是其他錯誤的東西？ 這是jsfiddle html和css：

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

<div>Crop Image and Upload</div>
        <button ngf-select ng-model="picFile" accept="image/*">
            Select Picture</button>
        <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
             class="cropArea">
            <img-crop image="picFile  | ngfDataUrl"                 
            result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
            </img-crop>
        </div>
        <div>
            <img ng-src="{{croppedDataUrl}}" />
        </div>
        <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button>

我的代碼只適用於上傳。 圖片看起來像預期的那樣。 我想知道為什么它是為了一個而不是另一個。 此代碼適用於ng-file-upload：

<div class="photo-upload-text">Upload your image</div>
<a class="upload-button" ngf-select ng-model="logo" href="#">Choose File&nbsp;</a>
<img ngf-src="logo" ngf-default-src="'/thumb.jpg'" ngf-accept="'image/*'">

最后，我列舉了兩個例子。 這個允許我裁剪圖片，但它不會產生base64文件，沒有可以輕松上傳的前綴。 第二個雖然相似但沒有把圖片用於裁剪。

允許裁剪但不會產生可接受的base64文件

<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div>
  <img ng-src="{{myCroppedImage}}" />
</div>

我認為這提供了一個很好的base64文件，但我不能裁剪它找出來

<div>Crop Image and Upload</div>
<button ngf-select ng-model="picFile" accept="image/*">Select Picture</button>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"class="cropArea">
    <img-crop image="picFile  | ngfDataUrl" result-image="croppedDataUrl" ng-init="croppedDataUrl=''"></img-crop>
</div>
<div>Cropped Image:</div>
<div>
    <img ng-src="{{croppedDataUrl}}" />
</div>

Answer 1

乍看之下一切看起來都不錯，但是當我從硬盤驅動器中選擇一張圖片時， 它不會出現在裁剪區域 。

當我嘗試使用下面的代碼重現您的問題時，一切都很完美。

 angular.module('app', ['ngFileUpload', 'ngImgCrop']).controller('UploadController', function($scope) { });

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

 <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.css" rel="stylesheet"/> </head> <body ng-app="app"> <div>Crop Image and Upload</div> <button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button> <div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea"> <img-crop image="picFile | ngfDataUrl" result-image="croppedDataUrl" ng-init="croppedDataUrl=''"> </img-crop> </div> <div> <img ng-src="{{croppedDataUrl}}" /> </div> <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.4/ng-file-upload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.js"></script> </body>

Answer 2

我嘗試了ngImgCrop和ng-file-upload的例子，它對我來說不起作用。 我需要添加以下代碼才能使其工作：

    var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.upload = function (dataUrl, name) {
        Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            data: {
                file: Upload.dataUrltoBlob(dataUrl, name)
            },
        }).then(function (response) {
            $timeout(function () {
                $scope.result = response.data;
            });
        }, function (response) {
            if (response.status > 0) $scope.errorMsg = response.status 
                + ': ' + response.data;
        }, function (evt) {
            $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        });
    }
}]);

這段代碼：

                $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);

你如何使用ng-file-upload和ngImgCrop？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-06-17 07:42:16

解決方案2
1 2017-12-14 12:50:26

你如何使用ng-file-upload和ngImgCrop？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-06-17 07:42:16

解決方案2 1 2017-12-14 12:50:26

解決方案1
2 已采納 2016-06-17 07:42:16

解決方案2
1 2017-12-14 12:50:26