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

乍看之下，一切看起来都不错，但是当我从中选择一张照片时我的硬盘它没有出现在裁剪区域。

当我尝试使用下面的代码重现您的问题时，一切正常。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我尝试了ngImgCrop和ng-file-upload的例子，它对我不起作用。我需要添加以下代码才能使其正常工作：

class MyStreamListener(tweepy.StreamListener):

    def on_status(self, status):
        return jsonify({'user_name': status.user.name, "user_screen_name": status.user.screen_name, 'tweet_content': status.text})


class FetchReturn(Resource):
    parser = reqparse.RequestParser()
    parser.add_argument('search_text', type=str, required=True)

    def post(self):
        search_text = FetchReturn.parser.parse_args()['search_text']  
        myStream = tweepy.Stream(auth=api.auth, listener=MyStreamListener())
        myStream.filter(track=[search_text], async=True, languages=["en"])
        time.sleep(60)
        myStream.disconnect()

此代码：

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

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

2 个答案: