html2canvas，样式不适用于画布？

Posted 2023-03-05

【中文标题】html2canvas，样式不适用于画布？

【英文标题】：html2canvas, styles not applied to canvas?

【发布时间】：2013-12-04 10:15:00

【问题描述】：

我正在编写用于处理图片并将其保存到图像的脚本。

我有一个 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);
            
        );

    );

【问题讨论】：

你能创建 JSFiddle 吗？

我使用 div 代替图片来进行演示。 jsfiddle.net/g5GGb/10

但是你想如何在没有 canvas HTML 标签的情况下使用 canvas 呢？看这个例子***.com/questions/10673122/…

不要与“canvas” div 混淆，它不是画布元素。据我了解：html2canvas 将我的“#canvas”div 及其元素转换为实际的画布元素（创建图像），然后将其发送到新窗口。就像我说的一切正常，我什至可以将图像保存为 png，我唯一的问题是在我将 div 转换为图像/画布后，css 样式“旋转”没有正确应用。

没有人经历过同样的事情？

【参考方案1】：

我知道这个问题很古老，而且您现在对此毫无疑问。但我相信

改进了转换支持，并且 它可能仍然无法与您的代码一起使用，因为您只使用了特定于浏览器的转换，而且您没有在任何地方简单地设置img.css('transform', 'rotate(' + ui.value + 'deg)');

对于它的价值，我的图层被旋转并且它工作正常。 不起作用的是不透明度，但我将把它留到另一篇文章中。

【参考方案2】：

html2canvas 似乎还没有完全支持 CSS 转换。见这里：

https://github.com/niklasvh/html2canvas/issues/184 https://github.com/niklasvh/html2canvas/issues/220