php+js在线剪切图片

php+js在线剪切图片，客户端的鼠标画框部分目前谷歌浏览器测试基本通过，其它未通过。js代码还有待修改。

2. [文件] cut.html

  @@##@@

left BEFORE

  right AFTER



x点

y点

宽度

高度

3. [文件] drawbox.js

// JavaScript Document画矩形框 2012-7-21 上午5:39:23
(function(){
		document.getElementsByTagName("img")[0].draggable=false;
	    var w=document.getElementsByTagName("img")[0].width;
	    var h=document.getElementsByTagName("img")[0].height;
	    document.getElementsByTagName("p")[0].style.left="10px";
	    document.getElementsByTagName("p")[0].style.top="10px";
	    document.getElementsByTagName("p")[0].style.width=w+"px";
	    document.getElementsByTagName("p")[0].style.height=h+"px"
		document.getElementsByTagName("img")[0].onmouseover=function(){
			//alert(event.clientX);
			this.onmousedown=function(){
				//alert("hi");
				//get position
				var x=event.clientX;
				var y=event.clientY;
				//alert(x+" "+y);
				//Create Div Mask
				(function(){
					 	var p0 = document.createElement("p");// 定义新的元素节点变量
					   	var body0 = document.getElementsByTagName("body")[0];
						p0.id="mask"//赋予新建元素的属性
					  	p0.style.left=x+"px";
					 	p0.style.top=y+"px";
						p0.style.boder="#0099FF solid 1px";
						p0.style.zIndex=100;
						p0.style.backgroundColor="#CC0000";
						p0.style.position="absolute";
					   	body0.appendChild(p0);// 把新建的节点 添加到boxcon里
					})();
				x_old=event.clientX;
				y_old=event.clientY;
				this.onmousemove=function(){
						//Redraw Mask
						var x_new=event.clientX;
						var y_new=event.clientY;
						document.getElementById("mask").style.width;
						document.getElementById("mask").style.height;
						var dx=((x_new-x_old)<0)?(-(x_new-x_old)):(x_new-x_old);
						var dy=((y_new-y_old)<0)?(-(y_new-y_old)):(y_new-y_old);
document.getElementById("mask").style.width=/*(document.getElementById("mask").offsetLeft*/dx+"px";
document.getElementById("mask").style.height=/*(document.getElementById("mask").offsetHeight+*/dy+"px";
					}
				}
				this.onmouseup=function(){
		this.onmousemove=null;
	document.getElementsByTagName("input")[0].value=document.getElementById("mask").offsetLeft-10;
        document.getElementsByTagName("input")[1].value=document.getElementById("mask").offsetTop-10;
	document.getElementsByTagName("input")[2].value=document.getElementById("mask").offsetWidth;
	document.getElementsByTagName("input")[3].value=document.getElementById("mask").offsetHeight;
					}
		}
		
	})()
//话说我今天熬了个通宵，程序员要保重身体，长得帅的程序员更要保重身体啊！
//再也不能这样搞了，伤不起啊！！！

4. [图片] 截图20120721053103.png

 以上就是php+js在线剪切图片的内容，更多相关内容请关注PHP中文网（www.php.cn）！

佐糖

一个AI驱动的图像处理和图片编辑平台，支持在线抠图、去水印、模糊照片变清晰、无损放大、图片裁剪、图片压缩和黑白照片上色等

下载