如何获取事件缩放的值并从输入中更改它

Question

我的情况是这样的：

我使用这个库：

http://fengyuanchen.github.io/cropper/

正如我所见，我可以使用事件缩放来检索缩放图像的值。所以我想知道如何获取它并从像 selectable 之类的输入中更改它。

var $content = $(c_s),
    $image = $(p_s),
    $dataWidth = $(i_w_s),
    $dataHeight = $(i_h_s),
    $dataX = $(i_x_s),
    $dataY = $(i_y_s),
    options = {
        autoCropArea: 1,
        strict: true,
        guides: true,
        highlight: true,
        dragCrop: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        movable: true,
        background: true,
        minContainerWidth: 340,
        minContainerHeight: 226,
        minCanvasWidth: 340,
        minCanvasHeight:226,
        minCropBoxWidth: 340,
        minCropBoxHeight:226,
        aspectRatio: radio,
        crop: function (data) {
            $dataX.val(Math.round(data.x));
            $dataY.val(Math.round(data.y));
            $dataHeight.val(Math.round(data.height));
            $dataWidth.val(Math.round(data.width));
        }
    };

$image.on({
  'zoom.cropper': function (e) {
    console.log(e.type, e.ratio);
  }
}).cropper(options);

这是该库的文档 https://github.com/fengyuanchen/cropper#zoomcropper

如您所见，在代码末尾我有一个 console.log 来检查是否有任何东西，但我的 Firebug 控制台中什么都没有。

Answer 1

文档

$().on('zoom.cropper', function (e) {
  var maxRatio = 10;
  var imageData = $(this).cropper('getImageData');
  var currentRatio = imageData.width / imageData.naturalWidth;

  // Zoom in
  if (e.ratio > 0 && currentRatio > maxRatio) {

    // Prevent zoom in
    e.preventDefault();

    // Fit the max zoom ratio
    $(this).cropper('setCanvasData', {
      width: imageData.naturalWidth * maxRatio
    });
  }

  // Zoom out
  // ...
});

你的代码

$image.on({
  'zoom.cropper': function (e) {
    console.log(e.type, e.ratio);
  }
}).cropper(options);

看看区别..语法

应该是

$image.cropper(options);
$image.on('zoom.cropper', function (e) {
    console.log("Here "+e);
})