按钮按下裁剪器母版上的图像旋转

Question

我正在使用这个插件来裁剪图像，我想在裁剪工具中实现图像的旋转。我正在使用以下代码初始化裁剪器。

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

但是，我在控制台中收到以下错误。

工具.js：993 未捕获的类型错误： $(...(.cropper.setCanvasData 不是 功能

有没有人对我在尝试旋转印记时出错的地方有任何建议？

谢谢。

Answer 1

看这里。

可以尝试

使用

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