「var image」をpngとしてダウンロード

Question

ファイルを.png形式でダウンロードするにはどうすればよいですか？ 私は空のファイル名を得ることができます：

今私はプログラムを選択する必要があります。

今、それは次のとおりです。画像

は私が持っていると思います：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"> 

は、次に、あなたのコード内で次のように imageにその <a>の hrefを設定することができます：あなたは、その後 <a>タグを隠し、 download.click()でクリックをシミュレートすることができます

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

。