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 &lt;a&gt; e define o href a ele
    var anchor = document.createElement("a");
    anchor.setAttribute("href", img.src);
    anchor.setAttribute("download", true);
    
    // Adiciona esse &lt;a&gt; no body do documento
    document.body.append(anchor);
    
    // Aciona o evento click
    anchor.click();
    
    // Remove o &lt;a&gt; 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 .




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2