download 'var image' as png

Question

How can I download a file as .png? I can get an empty file name:

Now to open the file I need to select the program.

Now it is: image

I want to have: image.png

How can I add the .png to the file?

I tried to do (image.png) instead of (image/png) but that doesn't work.

I'm able to open it in Paint but I need to hand select it.

HTML:

var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'black';
var lastStampId = '';
var enableDraw = false;

function init() {
    canvas = $('#imageView').get(0);
    context = canvas.getContext('2d');

    // Auto-adjust canvas size to fit window.
    canvas.width = window.innerWidth - 75;
    canvas.height = window.innerHeight - 75;

    //$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('click', onClick, false);
    canvas.addEventListener('mousedown', function (e) {
        enableDraw = true;
    }, false);
    canvas.addEventListener('mouseup', function (e) {
        enableDraw = false;
        started = false;
    }, false);

    // Add events for toolbar buttons.
    $('#red').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#pink').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#fuchsia').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#orange').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#yellow').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#lime').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#green').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#blue').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#purple').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#black').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#white').get(0).addEventListener('click', function (e) {
        onColorClick(e.target.id);
    }, false);
    $('#cat').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#dragonfly').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#ladybug').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#heart').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#dog').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#fill').get(0).addEventListener('click', function (e) {
        onFill();
    }, false);
    $('#save').get(0).addEventListener('click', function (e) {
        onSave();
    }, false);
}

function onMouseMove(ev) {
    var x, y;

    // Get the mouse position.
    if (ev.layerX >= 0) {
        // Firefox
        x = ev.layerX - 0;
        y = ev.layerY - 0;
    }
    else if (ev.offsetX >= 0) {
        // Opera
        x = ev.offsetX - 0;
        y = ev.offsetY - 0;
    }

    if (enableDraw && stampId.length === 0) {
        if (!started) {
            started = true;

            context.beginPath();
            context.moveTo(x, y);
        }
        else {
            context.lineTo(x, y);
            context.stroke();
        }
    }

    $('#stats').text(x + ', ' + y);
}

function onClick(e) {
    if (stampId.length > 0) {
        context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
    }
}

function onColorClick(color) {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    // Select the new color.
    context.strokeStyle = color;

    // Highlight selected color.
    var borderColor = 'white';
    if (color === 'white' || color === 'yellow') {
        borderColor = 'black';
    }

    $('#' + lastColor).css("border", "0px dashed white");
    $('#' + color).css("border", "1px dashed " + borderColor);

    // Store color so we can un-highlight it next time around.
    lastColor = color;

    // Turn off any stamp selection, since we're painting again.
    $(stampId).css("border", "0px dashed white");
    stampId = '';
}

function onFill() {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    context.fillStyle = context.strokeStyle;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function onStamp(id) {
    // Update the stamp image.
    stampId = '#' + id;

    if (lastStampId === stampId) {
        // User clicked the selected stamp again, so deselect it.
        stampId = '';
    }

    $(lastStampId).css("border", "0px dashed white");
    $(stampId).css("border", "1px dashed black");

    $('#' + lastColor).css("border", "0px dashed white");

    // Store stamp so we can un-highlight it next time around.
    lastStampId = stampId;
}

function onSave() {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream.png");
    window.location.href=image;
}

<!DOCTYPE html>
<html>
<head>
    <title>Paint</title>
    <style type="text/css">
        #container {
            position: relative;
        }

        #imageView {
            border: 1px solid #000;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        div#canvasDiv {
            cursor: crosshair;
        }

        div {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript" src="paint.js"></script>
    <script type="text/javascript" src="init.js"></script>
</head>
<body>
<div id="container" style="padding:5px 0px 0px 0px;">
    <div id="colorToolbar" style="border: 1px solid black; float: left;">
        <div id="red" style="background:red; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="pink" style="background:pink; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="fuchsia" style="background:fuchsia; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="orange" style="background:orange; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="yellow" style="background:yellow; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="lime" style="background:lime; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="green" style="background:green; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="blue" style="background:blue; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="purple" style="background:purple; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="black" style="background:black; width:50px; height:50px; float:left; border: 1px dashed white;"></div>
        <div style="clear: both;"></div>
        <div id="white" style="background:white; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <hr/>
        <div id="fill" style="width:50px; height:50px; float:left;"><img src="img/fill.png" width="50" height="50"/>
        </div>
        <div style="clear: both;"></div>
        <div id="cat" style="width:50px; height:50px; float:left;"><img id="catImg" src="img/cat.png" width="50"
                                                                        height="50"/></div>
        <div style="clear: both;"></div>
        <div id="dog" style="width:50px; height:50px; float:left;"><img id="dogImg" src="img/dog.png" width="50"
                                                                        height="50"/></div>
        <div style="clear: both;"></div>
        <div id="dragonfly" style="width:50px; height:50px; float:left;"><img id="dragonFlyImg" src="img/fly.png"
                                                                              width="50" height="50"/></div>
        <div style="clear: both;"></div>
        <div id="ladybug" style="width:50px; height:50px; float:left;"><img id="ladyBugImg" src="img/bug.png" width="50"
                                                                            height="50"/></div>
        <div style="clear: both;"></div>
        <div id="heart" style="width:50px; height:50px; float:left;"><img id="heartImg" src="img/heart.png" width="50"
                                                                          height="50"/></div>
        <div style="clear: both;"></div>
        <div id="save" style="width:50px; height:50px; float:left;">Save</div>
        <div style="clear: both;"></div>
    </div>

    <div id="canvasDiv" style="float: left;">
        <canvas id="imageView">
            <p>Unfortunately, your browser is currently unsupported by our web
                application. We are sorry for the inconvenience. Please use one of the
                supported browsers listed below, or draw the image you want using an
                offline tool.</p>
            <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
                    href="http://www.mozilla.com">Firefox</a>, <a
                    href="http://www.apple.com/safari">Safari</a>, and <a
                    href="http://www.konqueror.org">Konqueror</a>.</p>
        </canvas>
    </div>
    <div id="stats" style="font-size:8pt; padding-left: 50px; float: left;">0 0</div>
</div>
</body>
</html>

You can't replace `image/png` with `image.png` because that's the [MIME type](https://en.wikipedia.org/wiki/MIME) of the file. — Niklas Higi, Nov 02 '17 at 10:46
Possible duplicate of [Is there any way to specify a suggested filename when using data: URI?](https://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri) Or in athoer words you need to create an anchor and trigger `click` event on it. — deathangel908, Nov 02 '17 at 10:50

score 0 · Accepted Answer · answered Nov 02 '17 at 10:55

One solution would be to use the download attribute of the <a> tag.

<a id="download" download="image.png">

Then in your code you can set the href of that <a> to the image like this:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
download.setAttribute("href", image);

You can then hide the <a> tag and simulate a click with download.click().

download 'var image' as png

1 Answers1