Html2canvas: ¿Cómo puedo guardar la imagen rotada?

Creado en 10 may. 2013  ·  14Comentarios  ·  Fuente: niklasvh/html2canvas

¡Hola a todos!
Tengo una pregunta, ¿puedo guardar la imagen con transformación: rotar (23 grados); ?
Muchas gracias

Feature

Comentario más útil

¿Cómo puedo guardar div con transformación CSS: perspectiva?

Todos 14 comentarios

Las transformaciones CSS aún no son compatibles.

Entonces, ¿puedo hacer que la imagen gire en base64?

La transformación css no funciona. ¿¿¿Alguna solución???

@arindamm, la única solución rápida para esto sería si reemplaza "CSS" por "lienzo"
Tome la imagen o el texto en el lienzo y haga la rotación (esto debe hacerse fuera de la biblioteca "html2canvas" y debe ser antes de llamar a la función).

No es posible a través de mi aplicación. Voy a hacer un libro de cuentos en línea. Allí el usuario puede colocar tantas imágenes y texto como quiera. También pueden escalar y rotar esos objetos. Estoy usando la etiqueta DIV para estos. ¿Cómo puedo crear un lienzo con los datos del elemento div? ¿Puedes sugerir por favor?

@arindamm Fue como dije en su momento para guardar la imagen,
puede tomar todos los elementos y "window.getComputedStyle" (o jquery) para detectar si hubo una "rotación".
Si "gira" en el estilo del objeto, toma el valor de "rotación" y el texto (o imagen) que está dentro del objeto y simula el efecto en el "lienzo".

 var canvas = document.getElementById('myCanvas');
 var contexto = lienzo.getContext('2d');
 var rectWidth = 150;
 var rectHeight = 75;
 // traducir el contexto al centro del lienzo
 context.translate(canvas.width / 2, canvas.height / 2);
 // gira 45 grados en el sentido de las agujas del reloj
 context.rotate(Matemáticas.PI / 4);
 context.fillStyle = 'azul';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

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

Nota:
No existe una solución lista, pero quizás estos enlaces y códigos puedan crear una alternativa para su caso.
Otra idea es crear un complemento para cada navegador que haga el trabajo:

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

Espero que ayude.

Cerrando esto ya que hay muchos otros problemas sobre el mismo tema.

tal vez sea interesante notar que la rotación realmente funciona, cuando incrustas una imagen como blob...

Aún más extraño: funciona también sin blob. Mi archivo que obtuve hace un par de semanas dice que es 0.4.1. Cuando me construí o instalé a través de Bower, no funcionó. Desafortunadamente, no recuerdo dónde lo tomé, ya que solo estaba jugando...

El div de contenido está cayendo cuando estoy marcando la casilla de verificación usando 0.4.1
Alguien puede ayudarme por favor.

puede hacer una solución alternativa que se indica aquí:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Gracias por el enlace @ jjoe64 pero no tiene sentido para html2canvas.

html2canvas es una librería para renderizar (redibujar) elementos DOM (o página completa) en lienzo y sin etiqueta de lienzo de renderizado.

Su solución funciona solo para un elemento con rotación.

sí, no es una solución que funcione perfectamente, pero es una _solución alternativa_ para el problema, si tiene que renderizar texto o imágenes rotadas. Y para este caso de uso funciona perfectamente en nuestro proyecto donde lo usamos.

¿Cómo puedo guardar div con transformación CSS: perspectiva?

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

deepender87 picture deepender87  ·  4Comentarios

anthonymejia picture anthonymejia  ·  4Comentarios

koreanman picture koreanman  ·  4Comentarios

diego-rey picture diego-rey  ·  3Comentarios

AlphaDu picture AlphaDu  ·  4Comentarios