JQuery fengyuanchen кадрирования плагин - getImageData() не может получить ширина/высота

Question

Я использую fengyuanchen jQuery cropper

У меня есть промахнулись набор будет реагировать. Это означает, что отображаемая ширина/высота обрезанного изображения может быть не истинной собственной шириной/высотой. Мне нужно получить отображаемую ширину/высоту, чтобы я мог рассчитать, где можно обрезать исходное полноразмерное изображение, если это применимо.

Я прочитал этот пример в 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> 

Надеется, что это помогает кто-то