如何使用（仅）Javascript 将HTML Canvas保存为一个命名的.PNG文件

Question

如何使用（仅）Javascript 将HTML Canvas保存为一个命名的.PNG文件

5

我正在使用Html Canvas 和 JavaScript制作图像编辑器（只是为了更深入地学习这两种语言）。我搜索了很多问题，但没有一个能解决我的问题。以下是我目前的代码：

 <input type="text" id="PicName">
 <input type="button" value="Save" id="Save" onclick="Save()">
 <canvas style="border:1px solid blue;" id="myCanvas" width="800" height="800"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var timer = setInterval(gameLoop,10);

function gameLoop()
{

    var PicName = document.getElementById("PicName").value;

    ctx.fillStyle = "black";
    ctx.font = "30px Calbri";
    ctx.fillText(PicName,300,395);
}
</script>

PicName是一个字段，用户可以输入文件名。如果您尝试一下，就会发现我已经让PicName选择器工作了。现在，我只需要将带有名称的文件保存。

- Nathan Martin

1

如果你试一下，你怎么建议我们试一下？至少缺少两个元素。 - Jaromanda X

1

download.setAttribute("download", document.getElementById("PicName").value + '.png'); 可能是关于编程的内容。 - Jaromanda X

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user7332411 · Accepted Answer

试试这样做：

function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;

}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

这是一个可用的版本。

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */
function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '40px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '16px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}

/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

/**
 * Draw something to canvas
 */
doCanvas();

 body {
     background-color:#555557;
     padding:0;
     margin:0;
     overflow:hidden;
     font-family:sans-serif;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 canvas {
     border:1px solid #000;
      display: block;
 }
 #download {
     float:left;
     cursor:pointer;
     color:#ccc;
     padding:3px;
 }
 #download:hover {
     color:#fff;
 }

<canvas id="canvas">Sorry, no canvas available</canvas>
<div><a id="download">Download as image</a></div>