gerar imagem em javascript de uma div

5,212 views
Skip to first unread message

ribm ribm

unread,
Sep 9, 2012, 4:28:36 PM9/9/12
to javascr...@googlegroups.com
Olá pessoal,

Tem como em javascript gerar imagem de um conteudo de uma div ?

Alguém poderia uma solução simples.

Valeu!

Bruno Barros

unread,
Sep 9, 2012, 4:51:01 PM9/9/12
to javascr...@googlegroups.com
http://html2canvas.hertzen.com/ 

Abraços,
Bruno Barros



--
Você está recebendo esta mensagem porque se inscreveu no grupo "javascript brasil" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para javascr...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para javascript-br...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/javascript-bra?hl=pt-BR.

Eduardo Kraus

unread,
Sep 9, 2012, 6:26:21 PM9/9/12
to javascr...@googlegroups.com
Tem como fazer, mais só com Canvas.

Eduardo Kraus
Professor
kr...@eduardokraus.com
www.eduardokraus.com
Blog PHP php.eduardokraus.com
Blog Adobe Flex flex.eduardokraus.com




Em 9 de setembro de 2012 17:28, ribm ribm <rib...@gmail.com> escreveu:

--

Eduardo Kraus

unread,
Sep 9, 2012, 7:09:45 PM9/9/12
to javascr...@googlegroups.com
O que força o download é a linha

document.location.href = imagemData.replace("image/png", "image/octet-stream");

A linha abaixo colada no navegador irá mostrar uma imagem
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Já a linha abaixo, se colado no navegador irá perguntar se deseja salvar a imagem no computador.
data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Você também poderá salvar em outros formatos. Para saber mais leia:

Rafael Soares Mendonça

unread,
Sep 9, 2012, 10:22:31 PM9/9/12
to javascr...@googlegroups.com
valeu!

2012/9/9 Eduardo Kraus <eduard...@gmail.com>

ribm ribm

unread,
Sep 10, 2012, 12:47:12 PM9/10/12
to javascr...@googlegroups.com
Opa, valeu

Tem como jogar uma div para dentro do canvas?

Bruno Barros

unread,
Sep 10, 2012, 6:09:18 PM9/10/12
to javascr...@googlegroups.com
Novamente...  http://html2canvas.hertzen.com/  

Abraços,
Bruno Barros

ribmusp

unread,
Sep 10, 2012, 7:06:05 PM9/10/12
to javascr...@googlegroups.com
opa,

consegui, valeu!
sabem como faço para enviar via post?


 <script>
$(function() {

var html2obj = html2canvas($('body'));
var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
window.open(img);

});
</script>



2012/9/10 Bruno Barros <bruno...@gmail.com>

ribmusp

unread,
Sep 10, 2012, 10:51:01 PM9/10/12
to javascr...@googlegroups.com, Eduardo Kraus
nesse link ele consegue converter imagem também

pois só estou conseguindo carregar imagem.

valeu

2012/9/10 ribmusp <rib...@gmail.com>
Reply all
Reply to author
Forward
0 new messages