php+js在线剪切图片-PHP源码-php.cn

php+js在线剪切图片

PHP中文网

Libérer： 2016-05-25 17:10:40

original

1053 Les gens l'ont consulté

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

<?php
/*Created By RexLee
**PHP学习 2012-7-21 上午2:13:59
*/
$pic="pic/pic1.jpg";
$old_img=imagecreatefromjpeg($pic);
$width=$_GET["width"];
$height=$_GET["height"];
$c_pos_x=$_GET["c_pos_x"];
$c_pos_y=$_GET["c_pos_y"];
// $c_width=$_GET["c_width"];
// $c_height=$_GET["c_height"];
$img=imagecreatetruecolor($width, $height);
imagecopy($img, $old_img, 0, 0, $c_pos_x, $c_pos_y, $width, $height);
imagejpeg($img);
header("content-type:image/jpeg");
?>

Copier après la connexion

2. [文件] cut.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cut My Picture</title>
<style type="text/css">
#pic {
	position: absolute;
	left: 520px;
	top: 11px;
	width: 318px;
	height: 449px;
	z-index: 1;
}
#msg {
	position: absolute;
	left: 339px;
	top: 106px;
	width: 136px;
	height: 151px;
	z-index: 2;
	text-align: center;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 24px;
}
</style>
</head>
<body>

<p>
  <img src="pic/pic1.JPG" alt="hipic">
</p>
<p id="msg">left BEFORE<br>
  right AFTER
</p>
<br>
x点<input name="c_pos_x" value="" type="text"><br>
y点<input name="c_pos_y" value="" type="text"><br>
宽度<input name="width" value="" type="text"><br>
高度<input name="height" value="" type="text">
<input name="cut" type="button" onClick="cut()" value="cut">
<p id="pic">
</p>
</body>
</html>
<script type="text/javascript">
function cut(){
	var c_pos_x=document.getElementsByName("c_pos_x")[0].value;
	var c_pos_y=document.getElementsByName("c_pos_y")[0].value;
	var width=document.getElementsByName("width")[0].value;
	var height=document.getElementsByName("height")[0].value;
	document.getElementById("pic").innerHTML=&#39;<img src="cutpic.php?c_pos_x=&#39;+c_pos_x+
	&#39;&c_pos_y=&#39;+c_pos_y+&#39;&width=&#39;+width+&#39;&height=&#39;+height+&#39;">&#39;;
}
</script>
<script type="text/javascript" src="drawbox.js?1.1.6"></script>

Copier après la connexion

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;
					}
		}
		
	})()
//话说我今天熬了个通宵，程序员要保重身体，长得帅的程序员更要保重身体啊！
//再也不能这样搞了，伤不起啊！！！

Copier après la connexion

4. [图片] 截图20120721053103.png