html2canvas, styles not applied to canvas?

Question

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

    });

Instead of pictures i used divs for demonstration purpose. http://jsfiddle.net/g5GGb/10/ — gregaj, Nov 20 '13 at 13:08
But how you suppose to work with canvas without canvas HTML tag? Look at this example http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl — Boris Ivanov, Nov 20 '13 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, Nov 20 '13 at 20:35
Have a look here https://github.com/niklasvh/html2canvas/issues/184 — Boris Ivanov, Nov 21 '13 at 11:25
I have the same problem. I have flyer generator and some of my images inside have rotation html2canvas makes the same image with little deffect. all i need is to parse html2canvas object and change it before goes to rendering process — sulest, Aug 29 '14 at 14:15

score 2 · Answer 1 · answered Jul 24 '19 at 17:54

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

Transform support is improved, and
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.

score 1 · Answer 2 · answered Apr 29 '15 at 19:48

1

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

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

answered Apr 29 '15 at 19:48

David A

717
1
8
18

html2canvas, styles not applied to canvas?

2 Answers2