我确定代码是正确的，但不起作用？Javascript， Croppie JS， PHP， jQuery

Question

我在这段Croppie.JS代码中遇到了一些严重的问题。

它运行在Croppie.JS演示上。通过变量调用裁剪派插件是有效的，并在括号内报告一个对象。

但是，当我尝试将其链接到旋转按钮时，没有任何旋转。

我可以使用绑定功能中的方向设置旋转它，但是这似乎只有在同时刷新整个页面时才可以访问？

我希望有人能在这里帮助我，我一团糟。

我只是想让它在上传图片时，您可以在提交之前旋转它，而无需每次都刷新页面(因为刷新页面也是旋转图像？！

//法典：

<button class="vanilla-rotate" data-deg="-90">Rotate</button>
var croppieBox = $('#main-cropper').croppie({
viewport: { width: 300, height: 300 },
boundary: { width: 320, height: 320 },
enableOrientation: true,
update: function (data) {

var coords = $('#main-cropper').croppie('get');
//alert ( JSON.stringify(coords, null, 4) );
//for data use
var pointA = coords.points[0];
var pointB = coords.points[1];
var pointC = coords.points[2];
var pointD = coords.points[3];
var zoom = coords.zoom;
var croppieGet = $('#main-cropper').croppie('result', {
type: "canvas", 
format: <?php echo $file_ext;?>

}).then(function (img) {
document.getElementById("javascript_image_base64").value = img;
});
}         
//Close the first part of Croppie
});
croppieBox.croppie('bind', {
url: <?php echo "'".$croppy_image_path."'"; ?>,
});
//.vanilla-rotate is the HTML button
$('.vanilla-rotate').on('click', function(ev) {
//vanilla is the new croppie instance, croppieBox
var croppieBox = $('#main-cropper');

//This line seems to be causing the problem???
$croppieBox.croppie('rotate', parseInt($(this).data('deg')));

});


// get cropped image data
// get zoom data
// get crop points data
//send it to php

</script>

Answer 1

感谢Gulshan和ADyson，代码现在可以工作了。谢谢你们，非常感谢你们的帮助。您可以在 https://www.thejobswhale.com 查看您帮助构建的内容

如果你满意，我会把你们都添加到学分列表中。

更新，工作代码是

<script>
//Check when window is resized. If it crosses the boundary for mobile,
//remove the zoomer from the croppie plugin.
//If it crosses it the other way, add the zoomer back in.
var croppieBox = $('#main-cropper').croppie({
viewport: { width: 300, height: 300 },
boundary: { width: 320, height: 320 },
enableOrientation: true,
update: function (data) {

var coords = $('#main-cropper').croppie('get');
//alert ( JSON.stringify(coords, null, 4) );
//for data use
var pointA = coords.points[0];
var pointB = coords.points[1];
var pointC = coords.points[2];
var pointD = coords.points[3];
var zoom = coords.zoom;
var croppieGet = $('#main-cropper').croppie('result', {
type: "canvas", 
format: '<?php echo $file_ext;?>'

}).then(function (img) {
document.getElementById("javascript_image_base64").value = img;
});
}         
//Close the first part of Croppie
});
croppieBox.croppie('bind', {
url: <?php echo "'".$croppy_image_path."'"; ?>,
});
//.vanilla-rotate is the HTML button
$('.vanilla-rotate').on('click', function(ev) {
//vanilla is the new croppie instance, croppieBox
var croppieBox = $('#main-cropper');
croppieBox.croppie('rotate', parseInt($(this).data('deg')));
});


// get cropped image data
// get zoom data
// get crop points data
//send it to php

</script>