javascript - html2canvas, styles not applied to canvas? - Stack Overflow

admin管理员组

文章数量:1287606

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?

My code,

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

    });

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?

My code,

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

    });

• javascript
• jquery
• css
• html2canvas

Share Improve this question Follow asked Nov 20, 2013 at 12:09 gregajgregaj 33811 gold badge66 silver badges1515 bronze badges 8

• Can you create JSFiddle please? – Boris Ivanov Commented Nov 20, 2013 at 12:15
• Instead of pictures i used divs for demonstration purpose. jsfiddle/g5GGb/10 – gregaj Commented Nov 20, 2013 at 13:08
• But how you suppose to work with canvas without canvas HTML tag? Look at this example stackoverflow./questions/10673122/… – Boris Ivanov Commented Nov 20, 2013 at 15:06
• Dont be confused with "canvas" div, it is not meant as canvas element. As i understand this: html2canvas converts my "#canvas" div and its elements to actual canvas element(creates an image) and then sends it to a new window. Like i said everything works fine, i can even save an image as png, the only problem i have is that css style "rotate" is not applied correctly after i convert my div to image/canvas. – gregaj Commented Nov 20, 2013 at 20:35
• Nobody experienced the same thing? – gregaj Commented Nov 21, 2013 at 11:15

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

I know this question is ancient, and you're no doubt over it by now. But I believe

1. Transform support is improved, and
2. 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)');

For what it's worth, my layers are rotated and it's working fine. What's not working is opacity, but I'll leave that for another post.

It seems as though CSS transforms are not yet fully supported by html2canvas. See here:

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

本文标签： javascripthtml2canvasstyles not applied to canvasStack Overflow