下载``var image''为png

Question

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

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

现在是：image

我想要：image.png

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

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

我可以在“画图”中打开它，但需要手动选择它。

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

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

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

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

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

然后，您可以隐藏<a>标记并使用download.click()模拟点击。