我正在编写用于处理图片并将其保存到图像的脚本。
我有一个 div，我在其中设置了背景图像，在该 div 中，我有另一个 div，其中包含我操纵的图像（调整大小、旋转和拖动）。一切正常，我收到图像，调整大小和位置样式正确应用，只有旋转样式恢复为零度角，即水平。有什么解决方法吗？
我的代码，
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);
}
});
});