How to save an image Canvas in PNG or JPG format? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to save an image Canvas in PNG or JPG format?

I have made ships with HTML5 and JS but I want to save the results in PNG format, how do I do . . . Traducido de espaƱol a inglƩs por traductor de Google si consigues un error por favor reportelo.

11th Oct 2020, 12:54 AM
Daniel BriceƱo
Daniel BriceƱo - avatar
10 Answers
+ 2
You will have to open canvas image in your browser. I meant that you have to open your HTML in your browser. Then you will have to right click on your drawing. And click on save image. This will download the image. After saving THIS if u want to get in any other format. You can convert that photo. Hope this helpsšŸ˜ŠšŸ˜Š
11th Oct 2020, 2:17 AM
Steve Sajeev
Steve Sajeev - avatar
+ 2
This solution allows you to change the name of the downloaded file: HTML: <a id="link"></a> JAVASCRIPT: var link = document.getElementById('link'); link.setAttribute('download', 'MintyPaper.png'); link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")); link.click();
11th Oct 2020, 12:05 PM
Steve Sajeev
Steve Sajeev - avatar
+ 1
I didnt understand Daniel BriceƱo
11th Oct 2020, 3:09 AM
Steve Sajeev
Steve Sajeev - avatar
+ 1
No need to use onmoveevent
11th Oct 2020, 4:22 AM
Steve Sajeev
Steve Sajeev - avatar
0
thank you very much.šŸ˜
11th Oct 2020, 2:49 AM
Daniel BriceƱo
Daniel BriceƱo - avatar
11th Oct 2020, 3:13 AM
Daniel BriceƱo
Daniel BriceƱo - avatar
0
and I want to know how to save the image but your answer does not help me. Because I use a mobile device and the event: onmousemove () doesn't allow me that option. And he has another idea.
11th Oct 2020, 3:13 AM
Daniel BriceƱo
Daniel BriceƱo - avatar
0
I can use the onclick event and on the cell phone it would give me the same results but not on the pc. Well, on the pc it would have very different results
11th Oct 2020, 4:56 AM
Daniel BriceƱo
Daniel BriceƱo - avatar
0
You can use canvas.toDataUrl(); function
11th Oct 2020, 11:44 AM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
0
thanks I will try
11th Oct 2020, 2:22 PM
Daniel BriceƱo
Daniel BriceƱo - avatar