使用 angularjs 中的图像视图、裁剪和上传创建用于图像上传的 md 对话框

Posted 2023-02-25

【中文标题】使用 angularjs 中的图像视图、裁剪和上传创建用于图像上传的 md 对话框

【英文标题】：Create a md-dialog box for image upload with image view, crop and upload in angularjs

【发布时间】：2016-07-13 19:24:38

【问题描述】：

我想使用 Angular 材质创建一个 md 对话框，其中显示了用于图像选择的选择文件选项。选择图像后，它应该显示图像并提供裁剪工具，并提供裁剪图像的预览。 对于裁剪，我使用的是ng-img-crop

以下是触发 md 对话框的链接：

<span class="edit_image" ng-click="uploadPic()">

下面是上面函数调用的我的控制器函数：

$scope.uploadPic = function(ev)
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;
         $mdDialog.show(
            controller: imageUploadCtrl,
            templateUrl: 'uploadImage.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: useFullScreen
        );

下面是我正在使用的 html 模板：

<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>
<md-dialog-actions layout="row">
    <md-button ng-click="cancel()">
        Cancel
    </md-button>
    <span flex></span>
    <md-button type="submit" class="md-raised md-primary" ng-click="saveImage()">
        Upload
    </md-button>
</md-dialog-actions>

图片上传控制器：

function imageUploadCtrl($scope, $mdDialog)

        $scope.myImage='';
        $scope.myCroppedImage='';

        var handleFileSelect=function(ev) 
            console.log('trigger');
            var file=ev.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (ev) 
                $scope.$apply(function($scope)
                $scope.myImage=ev.target.result;
                );
            ;
            reader.readAsDataURL(file);
        ;
        angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

        $scope.hide = function () 
            $mdDialog.hide();
        ;
        $scope.cancel = function () 
            $mdDialog.cancel();
        ;
        $scope.saveImage = function () 
            Notifier.success("Image Uploaded Sucessfully");
            $mdDialog.hide();
        ;
    

如果我在新页面中执行此过程，以上代码可以完美运行。但不能在 md 对话框中工作。谁能帮我完成它。

【参考方案1】：

我遇到了同样的问题。您没有指定您遇到的确切问题，但我假设您在演示代码中使用的文件输入更改侦听器遇到了同样的问题，无法与 md 对话框一起使用（我不知道为什么它仍然不起作用） .

解决方法是使用下面显示的文件上传更改指令，从这里找到：https://***.com/a/41557378/1000610

angular.module("YOUR_APP_NAME").directive("ngUploadChange",function()
return
    scope:
        ngUploadChange:"&"
    ,
    link:function($scope, $element, $attrs)
        $element.on("change",function(event)
            $scope.$apply(function()
                $scope.ngUploadChange($event: event)
            )
        )
        $scope.$on("$destroy",function()
            $element.off();
        );
    
);

将文件输入html改成：

<input type="file" id="fileInput" ng-upload-change="handleFileSelect($event)"/></div>

然后将handleFileSelect函数改为scope var

$scope.handleFileSelect = function(evt) ...

并删除这个旧的更改侦听器行：

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

还注意到由于某种原因 ng-change 和 onchange 不能正常工作。