2

このプラグインを使用して画像をトリミングしていますが、トリミング ツールで画像の回転を実装したいと考えています。次のコードを使用してクロッパーを初期化しています。

$('#image').cropper({
  aspectRatio: 7 / 5,
  viewMode: 1,
  dragMode: 'move',
  autoCropArea: 0.65,
  restore: false,
  guides: false,
  highlight: false,
  width: 100,
  height: 100,
  cropBoxMovable: false,
  cropBoxResizable: false,
  toggleDragModeOnDblclick: false,
  minCropBoxWidth: 350,
  minCropBoxHeight: 200,
  strict: false
});

これは、画像の HTML と、次のように画像を回転させるボタンです。

<div>
   <img id="image" src="images/AddImage.png" class="userUpload" alt="Picture" />
</div>
<button type="button" class="btn btn-secondary" data-method="rotateTo" data-option="90" id="rotateImage">
    <span class="docs-tooltip" data-toggle="tooltip" title="$('#image').cropper.rotate(90)">
       Rotate 90°
    </span>
 </button>

また、画像の回転を処理することになっている次のJavaScript関数があります。

$("#rotateImage").click(function () {
  $('#image').cropper.setCanvasData({ rotate: 90 });
});

ただし、コンソールに次のエラーが表示されます。

Tools.js:993 Uncaught TypeError: $(...).cropper.setCanvasData は関数ではありません

画像を回転させようとしたときにどこが間違っていたのか、誰か提案はありますか?

ありがとう。

4

1 に答える 1