图片在线编辑php源码,php+js在线剪切图片

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");

?>

2. [文件] cut.html

Cut My Picture

#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;

}

left BEFORE

right AFTER

x点

y点

宽度

高度

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='';

}

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].οnmοuseοver=function(){

//alert(event.clientX);

this.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){

this.οnmοusemοve=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)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！