I'm working on a script for manipulating pictures and saving it to an image.
I have a div where i set a background image and in that div i have another div with an image which i manipulate (resize,rotate and drag around). Everything is working fine, i receive an image, resize and position styles are applied correctly, only rotate style is reverted back to zero degree angle, that is horizontally. Is there any workaround?
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
//rotating code, i have a slider in div next to "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);
}
});
});
I know this question is ancient, and you're no doubt over it by now. But I believe
img.css('transform', 'rotate(' + ui.value + 'deg)');
For what it's worth, my layers are rotated and it's working fine. What's not working is opacity, but I'll leave that for another post.
It seems as though CSS transforms are not yet fully supported by html2canvas. See here:
https://github.com/niklasvh/html2canvas/issues/184 https://github.com/niklasvh/html2canvas/issues/220
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With