How to save HTML Canvas as a named .PNG using (only) Javascript

Question

I'm working on an image editor with the Html Canvas and JavaScript (just to learn even more about both languages). I've searched around but none of the questions I've found have worked. Here is what I have right now:

 <input type="text" id="PicName">
 <input type="button" value="Save" id="Save" onclick="Save()">
 <canvas style="border:1px solid blue;" id="myCanvas" width="800" height="800"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var timer = setInterval(gameLoop,10);

function gameLoop()
{

    var PicName = document.getElementById("PicName").value;

    ctx.fillStyle = "black";
    ctx.font = "30px Calbri";
    ctx.fillText(PicName,300,395);
}
</script>

PicName is the field were the person can input the name of the file. As you can see (if you give it a try) I've already gotten the PicName selector to work. So now I just need to save the file WITH the name.

if you give it a try - how do you propose we give it a try? there's at least two elements missing — Jaromanda X
– Jaromanda X, Commented May 9, 2017 at 0:59
download.setAttribute("download", document.getElementById("PicName").value + '.png'); perhaps — Jaromanda X
– Jaromanda X, Commented May 9, 2017 at 1:05

score 4 · Accepted Answer · 2017-05-09 04:09:02Z

4

Try something like this:

function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;

}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

Here's a working version

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */
function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '40px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '16px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}

/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

/**
 * Draw something to canvas
 */
doCanvas();

	body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
      display: block;
	}
	#download {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}

<canvas id="canvas">Sorry, no canvas available</canvas>
<div><a id="download">Download as image</a></div>

edited May 9, 2017 at 4:09

answered May 9, 2017 at 1:14

user7332411

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Martin Over a year ago

ok so I've been trying it but it doesn't seem to be working. I haven't tried just taking the code and a trying it on a new file (to see whether or not it's my browser). Is there anything about the script I'm supposed to change at all?

Nathan Martin Over a year ago

So for some reason it just stopped working. Do you just want me to send you the file? I can provide a dropbox link.

Collectives™ on Stack Overflow

How to save HTML Canvas as a named .PNG using (only) Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related