html2canvas,样式未应用于画布
html2canvas, styles not applied to canvas?
我正在编写一个脚本,用于操作图片并将其保存到图像中。
我有一个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);
}
});
});
我知道这个问题很古老,你现在对它毫无疑问。但我相信
- 改进了对转换的支持,并且
- 它可能仍然不适用于您的代码,因为您只使用特定于浏览器的转换,而没有任何地方可以简单地设置
img.css('transform', 'rotate(' + ui.value + 'deg)');
值得一提的是,我的图层被旋转了,而且工作得很好。不起作用的是不透明,但我将把它留给另一篇文章。
似乎html 2 canvas还没有完全支持CSS转换。请参阅此处:
https://github.com/niklasvh/html2canvas/issues/184https://github.com/niklasvh/html2canvas/issues/220
相关文章:
- 如何在ExtJs中获得将应用于给定类列表的样式
- 使用css类将自定义样式应用于上下文按钮的Highcharts
- 将动态CSS样式应用于谷歌地图的标记
- 将动态样式应用于数据表行
- 点击时在元素上应用css样式,独立于父级
- 将样式应用于融合表上的图标时,会得到意外的标识符
- 样式表未应用于网页MEAN堆栈
- jQuery mobile:在页面导航期间,当建立服务器连接时,下一个页面的样式将应用于当前页面
- html2canvas,样式未应用于画布
- 将 CSS 样式动态应用于特定元素
- 样式未应用于对象
- 使用 css 类和正则表达式将样式动态应用于文本的各个部分
- 将格式样式应用于同义词
- 如何将样式应用于类的单个元素,同时从同一类的前一个元素中删除样式
- 如何将基于条件的样式应用于剑道 UI 网格
- 获取应用于特定元素的所有 css 样式的列表
- CKEDITOR将样式应用于选区
- 绑定数据列表后,将 css 样式重新应用于视图的一部分
- 如何选择所有节点并将 css 样式应用于所有节点,D3
- 需要将应用于图像的筛选器样式转换为特定的 JSON 格式