Generate png download from a div?

Asked

Viewed 1,294 times

-1

Is there any way to do that, guys? I wanted when the user clicked : download png to download the image in my div.

<div class='queroquevirepng'>
<CENTER><img src='https://about.canva.com/wp-content/uploads/sites/3/2017/02/congratulations_-banner.png' class='fundo' /><div class='logo'><br><div class='nomeEmpresa' style='position:absolute;'>DENY SISTEMAS</div></div></CENTER>
</div>
  • that part is hard Emm...

  • Do not change the whole meaning of the question. If you want you can ask another question.

1 answer

0

Yes, it is possible to generate a png from a div and it is also possible to download an image from your div.

If your image is in PNG, just use this form (with pure js).

// Botãod de Download
var btn = document.querySelector("button");

// Captura o elemento de imagem
var img = document.querySelector(".fundo");

// Adiciona o evento para baixar a imagem.
btn.addEventListener("click", function(){

    // Cria um elemento <a> e define o href a ele
    var anchor = document.createElement("a");
    anchor.setAttribute("href", img.src);
    anchor.setAttribute("download", true);
    
    // Adiciona esse <a> no body do documento
    document.body.append(anchor);
    
    // Aciona o evento click
    anchor.click();
    
    // Remove o <a> do body
    document.body.removeChild(anchor);
})
<div>
    <img src='http://www.epica.nl/epica_tss_fb_share.png' class='fundo' width="300" />
</div>

<button>Download</button>

Generate png download from a div?

As mentioned above, to generate a png from a div, use the html2canvas.

  • gave error to download friend , our cat q woman, opss.. gave error to download here, but it will work here?

  • Poxa amigo actually doesn’t work that why , I really need to download an html page and turn into png , better for you like this.

  • I edited my answer. Maybe I can help you.

  • I will give -1 pq the AP changed the question, which is not allowed.

  • By adjusting the answer I change my vote.

  • test.php:24 Uncaught Typeerror: Document.body.append is not a Function

  • copied and pasted and gave this error ae, did not put jquery pq is pure js even. I do not know what q and

  • I used the canvas

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.