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

Question

我正在尝试让 Croppie 脚本使用按钮进行旋转。由于似乎是不同的语法或其他原因，它不适用于此特定脚本。我不是一个狂热的 JavaScript 程序员。但下面的代码是我所拥有的，并试图使用按钮进行旋转。到现在都不好!哦!我在 croppie.js 中默认启用了 Orientation，因为由于语法原因我不知道如何在下面的脚本中添加它，以防万一你想知道。

$( 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>

他们的 Vanilla 演示具有旋转功能，但我试图让它在没有旋转功能的上传演示中工作。

Answer 1

来自达斯汀史密斯 -

The difference is you're initializing croppie with jquery. So you'll want to execute the rotate method with jquery, like so:

$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));

这是为我做的!所以问题解决了!感谢达斯汀!