-4

Temos uma imagem dentro de uma tag

    <div id='tiraafotomisera'>   
<CENTER><img src='../imgMarketing/fundoVerde.jpeg' class='fundo' /><div class='logo'><br><div class='nomeEmpresa' style='position:absolute;'>DENY SISTEMAS</div></div></CENTER>
        </div>

JS

<script>
html2canvas(document.querySelector("#tiraafotomisera")).then(canvas => {
    document.body.appendChild(canvas)
});
    </script>

Como posso baixar essa imagem automaticamente? Sem clicar em salvar como.

Resultado canvas é assim: inserir a descrição da imagem aqui

4
  • Desculpa, mas não estou entendendo porque tanto pergunta, a resposta que postei pt.stackoverflow.com/a/64198/3635 tem exemplo de como converter para imagem e até como fazer upload dela. Leia as partes que falo Salvando na maquina do usuário Desktop e o upload aonde esta escrito Salvando canvas no servidor
    – Syzoth
    Commented 1/01/2018 às 0:14
  • A outra pergunta tem muitas informações, não é objetivo. Commented 1/01/2018 às 0:24
  • Se uma pessoa procurar por uma solução no google referente a minha pergunta, a que vai aparecer como solução pra ele será a minha e não essa aí. Commented 1/01/2018 às 0:25
  • Esta organizado por topicos e isto não é desculpa, criei aquela pergunta exclusivamente para ajudar em tudo que fosse necessário, basta ler os topicos/titulos. Não leve a mal.
    – Syzoth
    Commented 1/01/2018 às 0:26

2 Respostas 2

0

Você pode fazer isso tudo com o js. Basta criar um anchor dinâmico.

Exemplo:

html2canvas(document.querySelector("#tiraafotomisera")).then(canvas => {
        var anchor = document.createElement("a");
        anchor.setAttribute("href", canvas.toDataURL());
        anchor.setAttribute("download", "amylee.jpg");

        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
});
html,body {
    height: 100%;
    width: 100%;
}
#tiraafotomisera {
    height: 100%
}
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<div id='tiraafotomisera'>   
    <center>
        <img src='https://images6.alphacoders.com/446/446769.jpg' class='fundo' width="500" />
    </center>
</div>

Ps.: document.body.appendChild não é do jQuery.

0

Bom, Vamos Da Forma MAIS FÁCIL, usando Jquery e esse js dificil..

Bom já que temos nosso canvas já criado, temos que pegar ele fazendo:

canvas = document.querySelector('canvas');

O canvas agora está na variavel canvas.

Agora temos que pegar o link do nosso canvas.

linkdaimagem = canvas.toDataURL();

Agora que já temos o link, iremos criar um botão no html, é melhor já deixar ele criado assim:

<a href=''>BAIXAR</A>

Agora o que iremos fazeR? Pegar o link da imagem do canvas e colocar no href, como fazer isso?

Quando o usuario clicar no <a href=''>BAIXAR</a> ele vai colocar no href o link que pegamos do canvas e irá colocar pra baixar, através das linhas:

$('a').on('click',function() {

    $(this).attr('href',link);
    $(this).attr('download','canvas.png');

});

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .