如何让某个 Croppie JavaScript 使用按钮旋转

How to get a certain Croppie JavaScript to rotate using buttons

本文关键字：按钮 旋转 JavaScript Croppie      更新时间：2023-09-26

我正在尝试使用按钮旋转裁剪脚本。由于似乎是不同的语法或其他内容，它不适用于此特定脚本。我不是一个狂热的JavaScript程序员。但是下面的代码是我所拥有的，并尝试使用按钮进行旋转。到目前为止不好！哦！我已经默认在裁剪中启用了方向.js因为由于语法的原因，我不知道如何在下面的脚本中添加它，以防万一您想知道。

$( document ).ready(function() {
    var $uploadCrop = $('#upload-demo');
        $uploadCrop.croppie({
            viewport: {
                width: 450,
                height: 450,
                type: 'square'
            },
            boundary: {
                width: 500,
                height: 500
            }
        });
        $uploadCrop.croppie('bind', 'imgs/cat.jpg');

        $('.vanilla-rotate').on('click', function(ev) {
            vanilla.rotate(parseInt($(this).data('deg'))); //<-------
        });

    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });
});

在我看来，我有注释掉箭头的行是问题所在。但我可能是错的。

我在 html 页面上有一个按钮作为 

<button class="vanilla-rotate" data-deg="-90">Rotate</button>

他们的香草演示具有旋转功能，但我正在尝试让它在没有旋转功能的上传演示上工作。

来自达斯汀史密斯 -

不同之处在于你正在使用jquery初始化裁剪饼。所以你会 想用jQuery执行旋转方法，像这样：

$uploadCrop.croppie（'rotate'， parseInt（$（this）.data（'deg'）））;

这为我做到了！所以问题解决了！感谢达斯汀！

初始化 uploadCrop 后创建一个函数。

$(function() {
  $('.vanilla-rotate').on('click', function(ev) {
        $uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
    });
});

顺时针 90 度使用 rot=6，逆时针 90 度使用 rot=8

： 
$('#rotate-btn').click(function() {
    orientation = rot;
    $image_crop.croppie('bind', {
      url: url,
      orientation: orientation
    });
  });

如果你想要恢复原始图像，使用相同的代码片段，rot=1。

相关文章：