我正在尝试使用按钮旋转裁剪脚本。由于似乎是不同的语法或其他内容,它不适用于此特定脚本。我不是一个狂热的JavaScript程序员。但是下面的代码是我所拥有的,并尝试使用按钮进行旋转。到目前为止不好!哦!我已经默认在裁剪中启用了方向.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();
});
});
});
在我看来,我有注释掉箭头的行是问题所在。但我可能是错的。
我在 html 页面上有一个按钮作为
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
他们的香草演示具有旋转功能,但我正在尝试让它在没有旋转功能的上传演示上工作。
来自达斯汀史密斯 -
不同之处在于你正在使用jquery初始化裁剪饼。所以你会 想用jQuery执行旋转方法,像这样:
$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
这为我做到了!所以问题解决了!感谢达斯汀!
初始化 uploadCrop 后创建一个函数。
$(function() {
$('.vanilla-rotate').on('click', function(ev) {
$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
});
});
顺时针 90 度使用 rot=6,逆时针 90 度使用 rot=8
:$('#rotate-btn').click(function() {
orientation = rot;
$image_crop.croppie('bind', {
url: url,
orientation: orientation
});
});
如果你想要恢复原始图像,使用相同的代码片段,rot=1。