html2canvas，樣式不適用於畫布嗎？

Question

我正在處理用於處理圖片並將其保存到圖像的腳本。

我有一個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;
}

Java腳本

 //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);
            }
        });

    });

Answer 1

似乎html2canvas尚未完全支持CSS轉換。 看這里：

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

Answer 2

我知道這個問題很古老，您現在無疑。 但是我相信

1. 轉換支持得到改善，並且
2. 它可能仍然無法與您的代碼一起使用，因為您僅使用了特定於瀏覽器的轉換，而無處設置img.css('transform', 'rotate(' + ui.value + 'deg)');

值得的是，我的圖層旋轉了並且工作正常。 什么是不工作是不透明的，但我會留給另一篇文章。