要从HTML canvas导出(导出)图片,您可以使用toDataURL()
方法获取canvas内容的数据URL,然后创建一个新的Image
元素并将其源设置为该URL。接下来,您可以使用a
标签的download
属性来触发下载。
以下是一个简单的示例代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<button onclick="exportImage()">导出画布图片</button>
<script>
function exportImage() {
var canvas = document.getElementById("myCanvas");
// 绘制一些东西到canvas上以测试导出功能
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
ctx.fillStyle = "green";
ctx.fillRect(150, 0, 150, 75);
// 导出canvas为图片
var dataURL = canvas.toDataURL("image/png");
downloadImage(dataURL, "canvas-image.png");
}
function downloadImage(dataURL, filename) {
// 创建一个a元素,用于触发下载
var link = document.createElement('a');
link.download = filename;
link.href = dataURL;
link.click();
}
</script>
</body>
</html>
在这个例子中,当用户点击按钮时,exportImage
函数被调用。这个函数首先将canvas绘制的内容转换为一个数据URL,然后调用downloadImage
函数,传入这个数据URL和期望的文件名。downloadImage
函数创建一个临时的a
标签,设置其href
和download
属性,并触发点击,从而开始下载过程。
效果图: