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

Question

我在处理这段 Croppie.JS 代码时遇到了一些严重问题。

它在 Croppie.JS 演示中运行。通过变量调用croppie插件正在工作并在括号内报告一个对象。

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

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

希望有人能帮帮我，我现在很乱。

我只是想做这样，当你上传图片时，你可以在提交之前旋转它，而不用每次都刷新页面（因为刷新页面也在旋转图片？！）

//代码：

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