Html2canvas: Comment puis-je enregistrer la rotation de l'image ?

Les transformations CSS ne sont pas encore prises en charge.

puis-je faire pivoter l'image en base64?

Le css de transformation ne fonctionne pas. Toute solution???

@arindamm la seule solution rapide à cela serait de remplacer "CSS" par "toile"
Prenez l'image ou le texte sur la toile et effectuez la rotation (cela doit être fait en dehors de la bibliothèque "html2canvas" et doit être avant d'appeler la fonction).

Ce n'est pas possible via mon application. Je vais créer un livre d'histoires en ligne. L'utilisateur peut y placer autant d'images et de texte qu'il le souhaite. Ils peuvent également redimensionner et faire pivoter ces objets. J'utilise la balise DIV pour ceux-ci. Comment puis-je créer un canevas avec les données de l'élément div ? Pouvez-vous suggérer s'il vous plaît?

@arindamm C'était comme je l'ai dit à l'époque pour enregistrer l'image,
vous pouvez prendre tous les éléments et "window.getComputedStyle" (ou jquery) pour détecter s'il y a eu une "rotation".
Si "rotation" dans le style de l'objet alors vous prenez la valeur de "rotation" et le texte (ou l'image) qui se trouve à l'intérieur de l'objet et simule l'effet sur la "toile".

 var canvas = document.getElementById('myCanvas');
 var contexte = canvas.getContext('2d');
 var rectWidth = 150 ;
 var hauteurrect = 75 ;
 // traduit le contexte au centre du canevas
 context.translate(canvas.width / 2, canvas.height / 2);
 // rotation de 45 degrés dans le sens des aiguilles d'une montre
 context.rotate(Math.PI / 4);
 context.fillStyle = 'bleu';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

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

Noter:
Il n'y a pas de solution toute faite, mais peut-être que ces liens et ce code vous permettront de créer une alternative pour votre cas.
Une autre idée est de créer un plugin pour chaque navigateur qui fait le travail :

Chrome:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Lien : 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]);
Lien : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#drawWindow ()

J'espère que cela pourra aider.

Je ferme ceci car il y a plusieurs autres problèmes sur le même sujet.

peut-être est-il intéressant de noter que la rotation fonctionne réellement, lorsque vous intégrez une image en tant que blob ...

Encore plus bizarre : ça marche aussi sans blob. Mon fichier que j'ai reçu il y a quelques semaines indique qu'il s'agit de la version 0.4.1. Lors de la construction ou de l'installation via Bower, cela n'a pas fonctionné. Malheureusement, je ne me souviens plus où je l'ai pris, car je ne faisais que jouer...

Content div descend lorsque je coche la case en utilisant 0.4.1
Quelqu'un peut-il m'aider s'il vous plaît.

vous pouvez faire une solution de contournement qui est dit ici:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Merci par lien @ jjoe64 mais n'a pas de sens pour html2canvas.

html2canvas est une bibliothèque pour rendre (redessiner) les éléments DOM (ou pleine page) dans le canevas et aucune balise de rendu de canevas.

Votre solution ne fonctionne que pour un élément avec rotation.

oui, ce n'est pas une solution qui fonctionne parfaitement, mais c'est une solution de contournement pour le problème, si vous devez rendre du texte ou des images pivotés. Et pour ce cas d'utilisation, cela fonctionne parfaitement dans notre projet où nous l'avons utilisé.

Comment puis-je enregistrer div avec CSS transform: perspective ?