canvas快照抓取

最新推荐文章于 2024-05-03 14:23:24 发布

hb707934728

最新推荐文章于 2024-05-03 14:23:24 发布

阅读量5k

点赞数

分类专栏： Html5_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/68945763

版权

尽管每个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='

最低0.47元/天解锁文章

hb707934728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas快照抓取

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

扫一扫

专栏目录