javascript - ngCropper - 单击按钮时更改纵横比

Question

我正在研究 ngCropper，但我想动态更改按钮单击时的宽高比，就像在 javascriptcropper 中发生的那样 ( https://fengyuanchen.github.io/cropper/ )

这是我编写的默认选项，

vm.options = {
   maximize: true,
   viewMode: 3,
   aspectRatio: 2 / 3,
   crop: function(dataNew) {
        data = dataNew;
   }
};

前端触发时有 2 个按钮ng-click = vm.cropHorizo​​ntal() 或 ng-click = vm.cropSquare()

function cropHorizontal() {
     vm.options = {
        aspectRatio: 2 / 3,
        crop: function(dataNew) {
            data = dataNew;
       }
    };
}

function cropSquare() {
   vm.options = {
      aspectRatio: 1 / 1,
      crop: function(dataNew) {
          data = dataNew;
      }
   };
}

当我在函数中记录某些内容时，我在控制台中登录，但无法更改宽高比。

请帮忙。提前致谢。

Answer 1

您需要修改 ngCropper 指令并在 options.aspectRatio 上添加一个观察器，如下所示:

    scope.$watch('options.aspectRatio', function (aspectRatio) {
            if (!shown) return;
            element.cropper("setAspectRatio", aspectRatio);
    });

此代码可以在 options.disabled 观察程序之后执行。

在您的自定义 JS 中，当宽高比复选框更改时调用函数:

    $scope.updateAspectRatio = function () {
        $scope.options.aspectRatio = $scope.aspectRatio ? 2 / 1 : NaN;        
    }