2

我在处理这段 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>
4

1 回答 1

4

感谢 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>
于 2019-12-02T12:09:37.697 回答