canvas快照抓取

尽管每个canvas对象都是一副位图,但它并不是HTML的img元素,所以用户不能对其进行某些操作,比如不能在canvas上通过右击鼠标然后将其保存到磁盘,也不能将其拖动到桌面上,不过canvas的API提供了一个叫做toDataURL()的方法,该方法所返回的引用,指向了某个给定canvas元素的数据地址,可以将img元素的src属性设置为这个数据地址

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<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>
			var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				snapshotButton = document.getElementById('snapshotButton'),
				snapshotImageElement = document.getElementById('snapshotImageElement'),
				FONT_HEIGHT = 15,
				MARGIN = 35,
				HAND_TRUNCATION = canvas.width / 25,
				HOUR_HAND_TRUNCATION = canvas.width / 10,
				NUMERAL_SPACING = 20,
				RADIUS = canvas.width / 2 - MARGIN,
				HAND_RADIUS = RADIUS + NUMERAL_SPACING,
				loop;

			function drawCircle() {
				context.beginPath();
				context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
				context.stroke();
			}

			function drawNumerals() {
				var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
					angle = 0,
					numeralWidth = 0;

				numerals.forEach(function(numeral) {
					angle = Math.PI / 6 * (numeral - 3);
					numeralWidth = context.measureText(numeral).width;
					context.fillText(numeral,
						canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2,
						canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3);
				});
			}

			function drawCenter() {
				context.beginPath();
				context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
				context.fill();
			}

			function drawHand(loc, isHour) {
				var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
					handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION :
					RADIUS - HAND_TRUNCATION;

				context.moveTo(canvas.width / 2, canvas.height / 2);
				context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
					canvas.height / 2 + Math.sin(angle) * handRadius);
				context.stroke();
			}

			function drawHands() {
				var date = new Date,
					hour = date.getHours();
				hour = hour > 12 ? hour - 12 : hour;
				drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
				drawHand(date.getMinutes(), false, 0.5);
				drawHand(date.getSeconds(), false, 0.2);
			}

			function drawClock() {
				context.clearRect(0, 0, canvas.width, canvas.height);

				context.save();

				context.fillStyle = 'rgba(255,255,255,0.8)';
				context.fillRect(0, 0, canvas.width, canvas.height);

				drawCircle();
				drawCenter();
				drawHands();

				context.restore();

				drawNumerals();
			}

			// 抓取canvas快照,并且把抓取到的快照设置为img的背景
			snapshotButton.onclick = function(e) {
				var dataUrl;
				if(snapshotButton.value === 'Take snapshot') {
					dataUrl = canvas.toDataURL(); //获取图像数据的地址
					clearInterval(loop); //清除定时器
					snapshotImageElement.src = dataUrl; //设置img的SRC
					snapshotImageElement.style.display = 'inline'; //display:inline 的作用是设置对象做为行内元素显示
					canvas.style.display = 'none';
					snapshotButton.value = 'Return to Canvas';
				} else {
					snapshotButton.value = 'Take snapshot';
					canvas.style.display = 'inline';
					snapshotImageElement.style.display = 'none';
					loop = setInterval(drawClock, 1000);
				}
			};

			// 初始化

			context.font = FONT_HEIGHT + 'px Arial';
			loop = setInterval(drawClock, 1000);
		</script>
	</body>

</html>

演示地址:http://sandbox.runjs.cn/show/gvziofpo

发布了241 篇原创文章 · 获赞 113 · 访问量 53万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览