特定のCroppie JavaScriptをボタンを使用して回転させる方法

Question

ボタンを使用して回転するCroppie Scriptを取得しようとしています。これは、異なる構文や何かのように見えるため、この特定のスクリプトでは機能しません。私は熱心なJavaScriptコーダーではありません。しかし、以下のコードは私が持っているものであり、ボタンを使って回転させることを試みています。これまでのところ良いことはありません！ああ！私はcroppie.jsでデフォルトでオリエンテーションを有効にしました。シンタックスのために、あなたが疑問に思っている場合に備えて、スクリプトの中でそれをどのように追加するのか分からなかったからです。

$(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(); 
     }); 
    }); 

}); 

私がコメントアウトしている行が問題だと思われます。しかし私は間違っている可能性があります。

私は

<button class="vanilla-rotate" data-deg="-90">Rotate</button> 

としてhtmlページ上のボタンを持っている彼らのバニラのデモは、回転する機能を持っていますが、私はそれは、彼らが回転機能を持っていないのアップロードのデモで動作するように取得しようとしています。ダスティン・スミスから

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'))); 
    }); 
});