Olá a todos!
Eu tenho uma pergunta, posso salvar a imagem tem transform: girar(23deg); ?
Muito Obrigado
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?
Comentários muito úteis
Como posso salvar div com transformação CSS: perspectiva?