下載``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()模擬點擊。