Question

我的情况是这样的：

我使用这个库：

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

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

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);
})

如何获取事件的值进行缩放并从输入

1 个答案: