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

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

トリミングは可能ですが、受け入れ可能な 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>