I am trying to get a Croppie Script to rotate using buttons. It does not work with this particular script due to what appears to be a different syntax or something. I am not an avid JavaScript coder. But the below code is what I have and trying to get rotation using button to work. So far no good! Oh! I have enabled the Orientation by default in croppie.js because due to the syntax I did not know how to add it within the script below, just in case you are wondering.
$( 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();
});
});
});
It seems to me that the line where I have ment out arrow is the problem. But I could be wrong.
I have a button on html page as
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
Their Vanilla demo has the rotating feature but I am trying to get it to work on the Upload demo where they do not have rotation feature.
I am trying to get a Croppie Script to rotate using buttons. It does not work with this particular script due to what appears to be a different syntax or something. I am not an avid JavaScript coder. But the below code is what I have and trying to get rotation using button to work. So far no good! Oh! I have enabled the Orientation by default in croppie.js because due to the syntax I did not know how to add it within the script below, just in case you are wondering.
$( 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();
});
});
});
It seems to me that the line where I have ment out arrow is the problem. But I could be wrong.
I have a button on html page as
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
Their Vanilla demo has the rotating feature but I am trying to get it to work on the Upload demo where they do not have rotation feature.
Share Improve this question asked Apr 22, 2016 at 14:43 JamesJames 5812 gold badges7 silver badges19 bronze badges 1- Does anyone have an answer? – James Commented Apr 27, 2016 at 19:33
3 Answers
Reset to default 8From Dustin Smith -
The difference is you're initializing croppie with jquery. So you'll want to execute the rotate method with jquery, like so:
$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
This did it for me! So problem solved! Thanks to Dustin!
Create a function after initializing uploadCrop.
$(function() {
$('.vanilla-rotate').on('click', function(ev) {
$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
});
});
use rot=6 for clockwise 90 deg, and rot=8 for anticlockwise 90 deg:
$('#rotate-btn').click(function() {
orientation = rot;
$image_crop.croppie('bind', {
url: url,
orientation: orientation
});
});
PS. if you want the original image back, use the same code snippet with rot=1.