我的情况是这样的:
我使用这个库:
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控制台中没有任何内容。
谢谢大家,
答案 0 :(得分:0)
<强>文档强>
$().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);
})