我们常常绘画的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>
<p id="controls">
<input id="snapshotButton" type="button" value="Take snapshot"/>
</p>
<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其他的应该都没有什么问题了。
