php+js在線剪切圖片
php+js在線剪切圖片，客戶端的鼠標畫框部分目前谷歌瀏覽器測試基本通過，其它未通過。JS代碼還有待修改。
cutpic.php
<?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");
?>
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>
<div>
<img src="pic/pic1.JPG" alt="hipic">
</div>
<div id="msg">left BEFORE<br>
right AFTER
</div>
<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">
<div id="pic">
</div>
</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='<img src="cutpic.php?c_pos_x='+c_pos_x+'&c_pos_y='+c_pos_y+'&width='+width+'&height='+height+'">';
}
</script>
<script type="text/javascript" src="drawbox.js"></script>
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("div")[0].style.left="10px";
document.getElementsByTagName("div")[0].style.top="10px";
document.getElementsByTagName("div")[0].style.width=w+"px";
document.getElementsByTagName("div")[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 div0 = document.createElement("div");// 定義新的元素節點變量
var body0 = document.getElementsByTagName("body")[0];
div0.id="mask"http://賦予新建元素的屬性
div0.style.left=x+"px";
div0.style.top=y+"px";
div0.style.boder="#0099FF solid 1px";
div0.style.zIndex=100;
div0.style.backgroundColor="#CC0000";
div0.style.position="absolute";
body0.appendChild(div0);// 把新建的節點 添加到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;
}
}
})()
//話說我今天熬了個通宵，程序員要保重身體，長得帥的程序員更要保重身體啊！
//再也不能這樣搞了，傷不起啊！！！
本文由用戶 ebey2291 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！