html编辑图片

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>画线例子</title>
        <style type="text/css">
            #c{ border:1px solid black;}
        </style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
		<script type="text/javascript">
			function updateImg(e){
				var ctx = document.getElementById('c').getContext('2d');
				var img=document.getElementById('logo');
				ctx.drawImage(img,0,0);
			}
			function done(){
				var data=document.getElementById('c').toDataURL();
				document.getElementById('logo').src=data;
			}
		</script>
    </head>
    <body>
        <div id="updateImg">
			<canvas id="c" width="477" height="210">
				你的浏览器不支持canvas标签,请使用firefox和chrome浏览器
			</canvas>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				if (document.getElementById('c')) {
					var isDown = false; //判断是否按下
					var ctx = document.getElementById('c').getContext('2d'); //取得画布
					ctx.strokeStyle = 'black'; //线条颜色
					ctx.beginPath(); //开始画线
					$('body').mousedown(function(e) {
						isDown = true;
						ctx.moveTo(e.clientX - 10, e.clientY - 10); //画笔拿起放到哪一点
					}).mousemove(function(e) {
						!isDown || ctx.lineTo(e.clientX - 10, e.clientY - 10, 5, 5); //画笔画到哪一点
						ctx.stroke(); //画线函数
					}).mouseup(function() {
						isDown = false;
					});
				} else {
					alert('ss');
				}
			}
		</script>
		<img id="logo" src="data:image/png;base64,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" border="0">
		<br>
		<input type="button" value="编辑" onClick="updateImg()" />
		<input type="button" value="完成" onClick="done()" />
    </body>
</html>

知识共享许可协议
《html编辑图片》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     153.11ms