ng-file-uploadとngImgCropはどのように使用しますか？

画像を自分のUIにアップロードしてトリミングし、それを自分のサーバーに送ることができるファイルアップローダーを作成したいと思います。私はファイルをアップロードするためにngFileUploadを使用しており、うまくいきました。指示どおりにngImgCropをプロジェクトに追加し、htmlとcssをhttp://jsfiddle.net/danialfarid/xxo3sk41/590/からプロジェクトにインポートして使用方法を調べました。一見するとすべてがよく見えますが、ハードドライブから画像を選択すると、作図領域には表示されません。何かが隠れていたり、何か間違っていますか？ここにjsfiddle htmlとcssがあります：ng-file-uploadとngImgCropはどのように使用しますか？

<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/*'">

最後に、2つの例を示しました。これは私が画像をトリミングすることができますが、簡単にアップロードできるプレフィックスのないbase64ファイルを生成しません。もう1つは類似していますが、切り抜きのために画像を上にしません。

は、私はこれは良い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>

出典

2016-06-14 rashadb

を見つけるためにそれをトリミングすることはできませんトリミングを可能にしますが、許容可能な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>

を生成しません。

一見一見良く見えますが、画像を選択すると、私のハードドライブ作物エリアには表示されません。

以下のコードを使用して問題を再現しようとすると、すべて正常に動作します。

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>

出典

2016-06-17 07:42:16

私はngImgCropの例とNG-ファイルアップロードを試してみましたが、あるとして、それは私のために動作しませんでした。

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

私はそれを動作させるために、次のコードを追加する必要が

出典

2017-12-14 12:50:26 yeahCoding

ng-file-uploadとngImgCropはどのように使用しますか？

答えて

関連する問題