javascript html2canvas，样式不适用于画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20095626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html2canvas, styles not applied to canvas?
提问by gregaj
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?
我有一个 div，我在其中设置了一个背景图像，在那个 div 中，我有另一个带有我操作的图像的 div（调整大小、旋转和拖动）。一切正常，我收到一张图像，正确应用了调整大小和位置样式，只有旋转样式恢复到零度角，即水平角。有什么解决方法吗？
My code,
我的代码，
HTML:
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:
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
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);
}
});
});
回答by David A
It seems as though CSS transforms are not yet fully supported by html2canvas. See here:
html2canvas 似乎还没有完全支持 CSS 转换。看这里：
https://github.com/niklasvh/html2canvas/issues/184https://github.com/niklasvh/html2canvas/issues/220
https://github.com/niklasvh/html2canvas/issues/184 https://github.com/niklasvh/html2canvas/issues/220
回答by Day Davis Waterbury
I know this question is ancient, and you're no doubt over it by now. But I believe
我知道这个问题很古老，你现在对此毫无疑问。但我相信
- Transform support is improved, and
- It may still not work with your code because you're using only the browser-specific transforms and nowhere are you setting simply
img.css('transform', 'rotate(' + ui.value + 'deg)');
- 转换支持得到改进，并且
- 它可能仍然无法与您的代码一起使用，因为您仅使用特定于浏览器的转换，而您没有在任何地方进行简单的设置
img.css('transform', 'rotate(' + ui.value + 'deg)');
For what it's worth, my layers are rotated and it's working fine. What's notworking is opacity, but I'll leave that for another post.
就其价值而言，我的图层已旋转并且运行良好。什么是不工作是不透明的，但我会留给另一篇文章。
