8

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

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

    });
4

2 回答 2

2

我知道这个问题很古老,你现在已经毫无疑问了。但我相信

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

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

于 2019-07-24T17:54:21.820 回答
1

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

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

于 2015-04-29T19:48:28.080 回答