尝试这样的事情：
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;
}
Sorry, no canvas available
1959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
