如何使用按钮使某个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

来自达斯汀史密斯 -

区别在于你用jquery初始化croppie.所以你想用jquery执行rotate方法,如下所示:

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

这样做对我来说!所以问题解决了!感谢达斯汀!

Answer 2

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

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