Html2canvas: How can i save rotate image?

[daochung]

Hi everyone!
I have a question, can i save image has transform: rotate(23deg); ?
Many thanks

[niklasvh]

CSS transforms aren't supported yet.

[daochung]

so can i make image rotate in base64?

[arindamINT]

The transform css is not working. Any solution???

[brcontainer]

@arindamm the only quick solution to this would be if you replace "CSS" for "canvas"
Take the image or text on canvas and make the rotation (this should be done outside the library "html2canvas" and must be before calling the function).

[arindamINT]

Its not possible through my application. I am going to make a online story book. There user can place as many images and text as they wants. They can also scale and rotate those objects. I am using DIV tag for these. How can I create a canvas with the data of div element? Can you suggest please?

[brcontainer]

@arindamm It was as I said at the time to save the image,
you can take all the elements and "window.getComputedStyle" (or jquery) to detect if there was a "rotate".
If "rotate" in the style of the object then you take the value of "rotation" and the text (or image) that is inside the object and simulates the effect on the "canvas".

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 4);
context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

Links:
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
http://api.jquery.com/css/ (get css with Jquery)
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (rotate with canvas+javascript)

Note:
There is no ready solution, but perhaps these links and code you can create an alternative for your case.
Another idea is you create a plugin for each browser that does the work:

Chrome:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Link: http://developer.chrome.com/extensions/tabs.html

Firefox:void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional]);
Link: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#drawWindow()

Hope that helps.

[niklasvh]

Closing this as there are multiple other issues on the same topic.

[johannesjo]

maybe its interesting to note that rotating actually works, when you embed an image as blob...

[johannesjo]

Even more weird: It works also without blob. My file which I got a couple of weeks ago states stat that it is 0.4.1. When building myself or installing via bower, it didn't not work. Unfortunately I don't remember where I took it, as I was just playing around...

[epalmtapas]

Content div is coming down when i am checking the checkbox by using 0.4.1
Can anyone please help me.

[jjoe64]

you can do a workaround which is told here:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

[brcontainer]

Thanks by link @jjoe64 but does not make sense to html2canvas.

html2canvas is a lib for render (redraw) DOM elements (or fullpage) in canvas and no render canvas tag.

Your solution work only for one element with rotation.

[jjoe64]

yes it's not a solution that works perfect but it is a _workaround_ for the problem, if you have to render rotated text or images. And for this use case it works perfectly in our project where we used it.

[Drons2p]

How i can save div with CSS transform: perspective ?