Html2canvas: Como posso salvar girar a imagem?

Criado em 10 mai. 2013  ·  14Comentários  ·  Fonte: niklasvh/html2canvas

Olá a todos!
Eu tenho uma pergunta, posso salvar a imagem tem transform: girar(23deg); ?
Muito Obrigado

Feature

Comentários muito úteis

Como posso salvar div com transformação CSS: perspectiva?

Todos 14 comentários

As transformações CSS ainda não são suportadas.

então posso fazer a imagem girar em base64?

A transformação css não está funcionando. Qualquer solução???

@arindamm a única solução rápida para isso seria se você substituir "CSS" por "canvas"
Pegue a imagem ou texto na tela e faça a rotação (isso deve ser feito fora da biblioteca "html2canvas" e deve ser antes de chamar a função).

Não é possível através do meu aplicativo. Vou fazer um livro de histórias online. Lá o usuário pode colocar quantas imagens e textos quiser. Eles também podem dimensionar e girar esses objetos. Estou usando a tag DIV para estes. Como posso criar uma tela com os dados do elemento div? Você pode sugerir por favor?

@arindamm Foi como eu disse na hora para salvar a imagem,
você pode pegar todos os elementos e "window.getComputedStyle" (ou jquery) para detectar se houve um "rotate".
Se "girar" no estilo do objeto então você pega o valor de "rotação" e o texto (ou imagem) que está dentro do objeto e simula o efeito na "tela".

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var rectWidth = 150;
 var rectAltura = 75;
 // traduz o contexto para o centro da tela
 context.translate(canvas.width / 2, canvas.height / 2);
 // gira 45 graus no sentido horário
 context.rotate(Math.PI / 4);
 context.fillStyle = 'azul';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

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

Observação:
Não existe uma solução pronta, mas talvez com esses links e código você possa criar uma alternativa para o seu caso.
Outra ideia é você criar um plugin para cada navegador que faça o trabalho:

Cromada:
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 ()

Espero que ajude.

Fechando isso, pois existem vários outros problemas no mesmo tópico.

talvez seja interessante notar que a rotação realmente funciona, quando você incorpora uma imagem como blob ...

Ainda mais estranho: funciona também sem blob. Meu arquivo que eu tenho um par de semanas atrás afirma que é 0.4.1. Ao me construir ou instalar via bower, não funcionou. Infelizmente não lembro onde tirei, pois estava brincando...

A div de conteúdo está caindo quando estou marcando a caixa de seleção usando 0.4.1
Alguém pode me ajudar por favor.

você pode fazer uma solução alternativa que é contada aqui:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Obrigado pelo link @jjoe64 mas não faz sentido para html2canvas.

html2canvas é uma lib para renderizar (redesenhar) elementos DOM (ou fullpage) em tela e nenhuma tag de tela de renderização.

Sua solução funciona apenas para um elemento com rotação.

sim, não é uma solução que funciona perfeitamente, mas é uma solução alternativa para o problema, se você precisar renderizar texto ou imagens giradas. E para este caso de uso funciona perfeitamente em nosso projeto onde o usamos.

Como posso salvar div com transformação CSS: perspectiva?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

arzyu picture arzyu  ·  3Comentários

yasergh picture yasergh  ·  5Comentários

tibewww picture tibewww  ·  4Comentários

Loki180 picture Loki180  ·  4Comentários

celik75 picture celik75  ·  4Comentários