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'）））;

这对我有用！所以问题解决了！感谢Dustin！

Answer 2

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

import mysql.connecter
conn=mysql.connector.connect(host="hostname",database="datbasename",user="root",password="a")
if conn.is_connected():
    print('connected to mysql database')

Answer 3

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

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

PS。如果要还原原始图像，请使用与rot = 1相同的代码段。

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

3 个答案: