nito
nito
  • 发布:2019-03-22 14:16
  • 更新:2019-03-22 14:16
  • 阅读:655

請問一个裁切图片的问题?

分类:HTML5+

在浏览器上可以跑
打包到手机里却没办法跑
想请问一下应该要如何修改
是因为事件event 在手机上不支援的关系吗
onmousedown="clipstart(event)"
onmouseup="clipstop(event)"
onmousemove="onmove(event)"

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
	<style type="text/css">  
		div#imgarea{  
			background-image: url(images/XXX.jpg);  
			background-repeat: no-repeat;float: left;  
		}  
		canvas#pCanvas{  
			cursor: pointer;  
		}  
		canvas#cimage{  
			border: 1px dotted;  
		}  
	</style>  
    <script type="text/javascript">  
    	  
   		document.addEventListener('plusready', function(){  
   			//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"  
   			  
   		});  
   		var canvas, context, image, ccanvas , ccontext;  
   		function init () {  
   			ccanvas = document.getElementById("cimage");  
   			ccontext = ccanvas.getContext("2d");  
   			canvas = document.getElementById("pCanvas");  
   			context =canvas.getContext("2d");  
   			context.lineWidth=6;  			  
   			context.strokeStyle='silver';	  
   			image=new Image();  
   			image.src="images/XXX.jpg";  
   			  
   		}  
   		var startx=0,starty=0;  
   		var stopx=0;  
   		var stopy=0;  
   		var cb=0;  
   		function clipstart(event){  
   			startx=event.x;  
   			starty=event.y;  
   			cb=1;  
   		}  
   		function clipstop(event){  
   			stopx=event.x;  
   			stopy=event.y;  
   			cb=0;				  
   		}  
   		function onmove(event){  
   			if (cb==1){  
   				context.clearRect(0,0,canvas.width,canvas.height);  
   				var h = event.y - starty;  
   				var w = event.x - startx;  
   				context.strokeRect(startx,starty,w,h);  
   			}  
   		}  
   		function drawCImage(event){  
   			ccontext.clearRect(0,0,ccanvas.width,ccanvas.height);  
   			var h = stopy - starty;  
   			var w = stopx - startx;  
   			ccontext.drawImage(image,startx,starty,w,h,0,0,w,h);  
   		}  
		  
		  
		  
    </script>  
</head>  
<body>  
	<body onload="init()">  
		<div>  
			<div id="imgarea">  
				<canvas id="pCanvas" width="600" height="400"  
					onmousedown="clipstart(event)"  
					onmouseup="clipstop(event)"  
					onmousemove="onmove(event)"  
				></canvas>  
			</div>  
			  
			<div>  
				<canvas id="cimage" width="600" height="400" onmousedown="drawCImage(event)">  
				</canvas>  
				  
			</div>  
			  
			  
		</div>  
		  
		  
		  
		  
	</body>  
</body>  
</html>
2019-03-22 14:16 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复