如何使用ng-file-upload裁剪图像和上传？

Posted 2021-03-27

这是我的观点。

<div class="btn btn-primary"
     ng-model="file" name="file"
     accept="image/*"
     ngf-select ngf-pattern="'image/*'"
     ngf-min-height="100" ngf-min-width="100"
     ngf-resize="{width: 400, height: 600}"
     ngf-max-size="20MB"
     ngf-multiple="false">Select
</div>


<input type="file" img-cropper-fileread image="cropper.sourceImage"/>
<div>
    <canvas width="500" height="300" id="canvas"
            image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage"
            crop-width="400" crop-height="200" touch-radius="30"
            keep-aspect="true" crop-area-bounds="bounds">
    </canvas>
</div>
<div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
<div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}"/></div>


<button type="submit" ng-click="submit()">submit</button>

这是我的控制器。

$scope.cropper = {};
$scope.cropper.sourceImage = null;
$scope.cropper.croppedImage   = null;
$scope.bounds = {};
$scope.bounds.left = 0;
$scope.bounds.right = 0;
$scope.bounds.top = 0;
$scope.bounds.bottom = 0;

$scope.url = 'http://192.168.0.101/mysite/uploadurl';

$scope.submit = function() {
    $scope.upload($scope.file);
};

// upload on file select or drop
$scope.upload = function (file) {
    Upload.upload({
        url: $scope.url,
        data: {file: file}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    });
};

我可以上传我的ng-model =“文件”，但没有裁剪图像。

如何将裁剪后的图像插入我的数据：{file：file}。

答案

在您的函数中传递新裁剪的图像。

<button type="submit" ng-click="submit(cropper.croppedImage)">submit</button>

现在相应地更改提交功能：

$scope.submit = function(croppedImage) {
    $scope.upload(croppedImage);
};