php+js在线剪切图片
程序员文章站
2022-05-15 16:05:55
...
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
<!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='<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?1.1.6"></script>
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)!
上一篇: php mysql数据库连接类