How to transform canvas image into PNG? [duplicate]

Question

How to transform canvas image into PNG? [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

-3

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.

Canvas result looks like this:

canvas

asked by anonymous 31.12.2017 / 19:29

2 answers

BeautifulSoup find method returns empty [closed] Building graphics [closed]

score 0 · Answer 1

You can do this all with js . Just create a% 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><divid='tiraafotomisera'><center><imgsrc='https://images6.alphacoders.com/446/446769.jpg'class='fundo'width="500" />
    </center>
</div>

Ps: document.body.appendChild is not from jQuery.

score 0 · Answer 2

Well, let's take it easy, using Jquery and this js hard ..

Well since we have our canvas already created, we have to get it done:

canvas = document.querySelector('canvas');

The canvas is now on the canvas variable.

Now we have to get 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 already to let it created like this:

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

Now what will we do? Get the canvas image link and put it in href, how do you do that?

When the user clicks on <a href=''>BAIXAR</a> he will put in the href the link that 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');

});