Question

我正在使用this插件来裁剪图像，并且想要在图像处于裁剪工具中时实现图像的旋转。我正在使用以下代码初始化裁剪器。

$('#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未捕获的TypeError：$（...）。cropper.setCanvasData不是功能

有人在尝试旋转图像时对我出了错的地方有任何建议吗？

谢谢。

Answer 1

请参见here。

您可以尝试使用

来调用该方法的另一种方法

$('#image').cropper.('rotate',90);

按下按钮时的图像旋转

1 个答案: