Currently, I am in the process of developing a script that allows for image manipulation and saving.
I have a main div where I set a background image, within which there is another div containing an image that can be manipulated (resized, rotated, and dragged around). The resizing and positioning styles work perfectly fine. However, the rotate style keeps reverting back to a zero-degree angle horizontally. Is there a workaround for this issue?
Here's a snippet of my code:
HTML:
<div id="canvas">
<div id="imgdiv">
<img id="slika1" src="images/ocala.png"/>
</div>
</div>
<div id="bottom">
<button id="shrani">
Download
</button>
</div>
CSS:
#canvas {
float: left;
width: 69%;
height: 400px;
border: 1px solid red;
background-image: url('../images/face.jpg');
background-size: 80% 100%;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
#imgdiv {//
border: 1px solid #000000;
display: inline-block;
z-index: 2;
}
Javascript
//rotation code, with a slider in a div next to the "canvas" div
var img = $("#imgdiv");
$("#rotate").slider({
min : -180,
max : 180,
value : 0,
change : function(event, ui) {
if (event.originalEvent) {
img.css('-moz-transform', 'rotate(' + ui.value + 'deg)');
img.css('-webkit-transform', 'rotate(' + ui.value + 'deg)');
img.css('-o-transform', 'rotate(' + ui.value + 'deg)');
img.css('-ms-transform', 'rotate(' + ui.value + 'deg)');
kot = ui.value;
} else {
}
}
});
//html2canvas code
$("#shrani").click(function() {
html2canvas($("#canvas"), {
onrendered : function(canvas) {
var data = canvas.toDataURL();
window.open(data);
}
});
});