How to turn canvas image into PNG?

Asked

Viewed 1,923 times

-4

We have an image inside a 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>

How can I download this image automatically? Without clicking save as.

Result canvas is like this: inserir a descrição da imagem aqui

canvas

  • I’m sorry, but I don’t understand why you’re asking so much, the answer I posted https://answall.com/a/64198/3635 has an example of how to convert to image and even how to upload it. Read the parts I speak Saving on Desktop User Machine and upload where written Saving canvas on the server

  • The other question has a lot of information, it’s not objective.

  • If a person looks for a solution in google related to my question, the one that will appear as solution for it will be mine and not this one.

  • It is organized by topics and this is no excuse, I created that question exclusively to help in everything that was necessary, just read the topics/ titles. Don’t take it personally.

2 answers

0

You can do all this with the js. Just create a anchor dynamic.

Example:

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 is not from jQuery.

0

Well, let’s go the easy way, using Jquery and this difficult js..

Good since we have our canvas already created, we have to catch him doing:

canvas = document.querySelector('canvas');

The canvas is now in the canvas variable.

Now we have to take the link from our canvas.

linkdaimagem = canvas.toDataURL();

Now that we already have the link, we will create a button in html, it is better to already leave it created like this:

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

Now what are we gonna do? Take the canvas image link and put in href, how to do this?

When the user clicks on <a href=''>BAIXAR</a> it will put on href the link we took from the canvas and will put to download, through the lines:

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

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

});

Browser other questions tagged canvas

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