Question

如何将文件下载为.png？我可以得到一个空文件名：

现在打开我需要选择程序的文件。

现在是：image

我想要：image.png

如何将.png添加到文件中？

我尝试做（image.png）而不是（image / png），但这不起作用。

我可以在Paint中打开它，但我需要手动选择它。

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>

Answer 1

一种解决方案是使用download标记的<a>属性。

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

然后在您的代码中，您可以将href的{{1}}设置为<a>，如下所示：

image

然后，您可以隐藏var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); download.setAttribute("href", image);代码并使用<a>模拟点击。

下载'var image'为png

1 个答案: