Generate the png download from a div?
-
Do you have a way to do that? I wanted when the user clicked on : download png to download the image they have on 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>
-
Yes, it is possible to generate a
png
from a div and it is also possible to download an image of 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 the png download from a div?
As it was above, to generate a
png
from a div, use the http://html2canvas.hertzen.com .