Question

我将裁剪器设置为响应。这意味着正在裁剪的图像的显示宽度/高度可能不是真正的原始宽度/高度。我需要获取显示的宽度/高度，以便我可以计算在适用时裁剪原始全尺寸图像的位置。

我在the docs中阅读了这个例子：

var imageData = $().cropper('getImageData');

但是，console.log(imageData);会返回此信息：

> n.fn.init {}
    > __proto__ : Object[0]
        /* Inside this is every custom defined js function */

如果有人有这方面的经验，那将是一个重要的帮助。

对于有此问题的其他人：我目前只是抓住.width()这样的.cropper-canvas对象，但如果有人知道如何正确使用该方法，我仍会感激。

var cropperCanvas = $('.cropper-canvas');
console.log('Width: '+cropperCanvas.width()+"\nHeight:"+cropperCanvas.height());

Answer 1

要访问此信息，您必须在“内置”功能中调用这些方法。像这样：

var $crop = $('.img');

$crop.cropper({
  built: function() {
    var canvasData = $crop.cropper('getCanvasData');
    var cropBoxData = $crop.cropper('getCropBoxData');
    var imageData = $crop.cropper('getImageData');
    
    $('.cd').text('Canvas Data: ' + JSON.stringify(canvasData));
    $('.cb').text('CropBox Data: ' + JSON.stringify(cropBoxData));
    $('.id').text('Image Data: ' + JSON.stringify(imageData));
  }
});

.container {
  max-width: 800px;
}

.container .img {
  width: 100%; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js"></script>

<div class="container">
  <img class="img" src="http://www.beijingiphonerepair.com/wp-content/uploads/2011/10/iphone4s_sample_photo_1.jpg" alt="">
</div>
<p class="cd"></p>
<p class="cb"></p>
<p class="id"></p>

这是一个简单的例子，只是为了向您展示这个想法。希望它有所帮助。

Answer 2

有同样的问题，在任何地方都没有太大帮助。从各个地方拼凑出一个解决方案。遗憾的是，这个插件的文档/现实示例很缺乏，但它可能是我使用过的最佳剪辑脚本

表格：

<div class="cropperOriginal">
    <img id="image" src="/yourimage.jpg">
</div>
<form method="POST" action="test.php">
    X: <input type="text" name="dataX" id="dataX" placeholder="X" value="" />
    Y: <input type="text" name="dataY" id="dataY" placeholder="Y" value="" />
    W: <input type="text" name="dataWidth" id="dataWidth" placeholder="width" value="" />
    H: <input type="text" name="dataHeight" id="dataHeight" placeholder="height" value="" />
    <input type="submit" />
</form>

<div class="img-preview"></div>

javascript

<script>
window.addEventListener('DOMContentLoaded', function () {
    var ele = $("#image");
    var dataX = document.getElementById('dataX');
    var dataY = document.getElementById('dataY');
    var dataHeight = document.getElementById('dataHeight');
    var dataWidth = document.getElementById('dataWidth');

    ele.cropper({
        aspectRatio: 4 / 3,
        preview: '.img-preview',
        crop: function (e) {
            var imageData = ele.cropper('getData');
            dataX.value = Math.round(imageData.left);
            dataY.value = Math.round(imageData.top);
            dataHeight.value = Math.round(imageData.height);
            dataWidth.value = Math.round(imageData.width);
        },
        zoomable: false,
        scalable: false,
        movable: false,
        background: true,
        viewMode: 2

    });
});
</script>

希望这有助于某人

jQuery fengyuanchen cropper插件 - getImageData（）无法获取宽度/高度

2 个答案: