Question

我正在使用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选择器工作了。所以现在我只需要保存带有名称的文件。

Answer 1

尝试这样的事情：

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);

这是一个有效的版本

＆＃13;

/**
 *    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();

＆＃13;

	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;
	}

＆＃13;

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

＆＃13;

如何使用（仅）Javascript将HTML Canvas保存为命名.PNG

1 个答案: