canvas（11/30）--------打印canvas的内容（toDataURL()）

最新推荐文章于 2025-05-28 08:15:00 发布

原创最新推荐文章于 2025-05-28 08:15:00 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用canvas的toDataURL()方法将绘制的canvas内容转换为image，以便用户可以保存或打印。通过创建一个不可见的img元素，设置其src为canvas的数据地址，然后通过显示/隐藏元素，实现了从canvas到image的切换。同时，提到了利用setInterval和clearInterval进行周期性操作，以及style.display控制元素的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们常常绘画的canvas的画布内容，对于用户而言是只能看不能进行操作的，你所绘画出来的呈现出来的图片，其实用户看到了之后是无法对其进行操作的，不能进行保存和打印，这样，我们就需要用一种方法对我们所画的canvas进行改变，使之变成一个image。

canvas的API提供的toDataURL()：返回的引用，指向了某个给定canvas元素的数据地址。可以将img元素的src属性值设置为这个数据地址，这样就可以创建表示canvas的图像了。

html页面的代码：

1.向网页中加入一个不可见的图像元素（img id="snapshotImageElement"），然后给该元素设置好id值，但不要设定其src属性。

2.通过css，调整图像的位置大小，使其刚好的覆盖在canvas上

3.对网页中加入一个用于抓取快照的控件

JavaScript代码：

1.获取指向不可见图像元素的引用

2.获取快照抓取控件的引用

3.当用户激活控件以抓取快照时：

（1）调用toDataURL()方法来获取数据地址

（2）将数据地址设置为不可见图像的src属性

（3）将图像元素设置为可见，将canvas设置为不可见

4.当用户激活控件以返回到canvas时：

（1）使canvas元素可见，使图像元素不可见

（2）如有必要，重绘canvas

setInterval(drawClock,1000):按照指定的周期（毫秒）来调用函数或者计算表达式

clearInterval：消除setInerval方法的定时器

style.display：更改display的样式（none：隐藏对象，block：块元素，inline：内联元素）

js：

var canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	snapshotButton = document.getElementById('snapshotButton');
	snapshotImageElement = document.getElementById('snapshotImageElement');
	loop;

snapshotButton.onclick = function (e) {
	var dataUrl;

	if (snapshotButton.value === 'Take snapshot') {
		dataUrl = canvas.toDataURL();
		clearInterval(loop);
		snapshotImageElement.src = dataUrl;
		snapshotImageElement.style.display = 'inline';
		canvas.style.display = 'none';
		snapshotButton.value = 'Ruturn to Canvas';
	}
	else {
		canvas.style.display = 'inline';
		snapshotImageElement.style.display = 'none';
		loop = setInterval(drawClock,1000);
		snapshotButton.value = 'Take snapshot';
	}
};

context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock,1000);

html：

<html>
<head>
<title>clock</title>
<style>
	body {
		background: #dddddd;
	}

	#canvas {
		position: absolute;
		left: 10px;
		top: 1.5em;
		margin: 20px;
		border: thin solid #aaaaaa;
	}

	#snapshotImageElement{
		position: absolute;
		left: 10px;
		top: 1.5em;
		margin: 20px;
		border: thin solid #aaaaaa;
	}
</style>
</head>
<body>
	<div id="controls">
	<input id="snapshotButton" type="button" value="Take snapshot"/>
	</div>

	<img id="snapshotImageElement">

	<canvas id="canvas" width="400" height="400">canvas not supported</canvas>

	<script src='example3.js'></script>
</style>
</head>
</html>

此代码少了drawClock函数，那个是个画钟的代码，在上一节已经写出来了，js的名称是example3.js其他的应该都没有什么问题了。