繁体   English   中英

ng img crop-裁剪现有图像

[英]ng img crop - cropping existing images

ng-img-crop是一个很棒的指令,但是我很难适应它。 我的问题是,当用户拥有图像时,如果他们愿意,我想给他们选择调整图像大小的选项。

因此,这是我尝试使用的代码:

js:

vm.userImageOriginal = vm.editUser.image_pkey ? 'api/file/' + vm.editUser.image_pkey : null;

的HTML:

<img-crop image="profileVM.userImageOriginal" result-image="profileVM.userImageNew"
                                          area-type="square" result-image-size="300" on-change="profileVM.imageCropped = true;"></img-crop>

所以我有两个问题:

1)如果用户确实更改了裁剪,我只想上传新图像。 我尝试在on-change中设置一个标志,但是看起来on-change也可以在初始化时执行。 有什么方法可以知道用户是否实际裁剪了吗?

2)有什么方法可以设置正方形/圆形的位置。 在我的方案中,如果存在现有的用户图像,我想将裁剪正方形设置为当前图像的尺寸(即图像的边框)。

提前致谢。

像这样解决:

将以下属性添加到html中的ng-img-crop指令中:

on-load-done="profileVM.addCroppingWatcher()"

这是函数:

function addCroppingWatcher(){
            if (croppingWatcher)
                return;

            $window.setTimeout(function(){
                croppingWatcher = $scope.$watch(
                    function(){ return vm.userImageNew; },
                    function(newVal, oldVal){
                        if (oldVal && oldVal != newVal) {
                            vm.imageCropped = true;
                            croppingWatcher();
                        }
                    }
                );
            }, 0);
        }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM