当前位置：编程学习 > php >>

php 在线切图程序代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>php教程 在线切图程序代码
</title>
<style>
/* { -moz-box-sizing:border-box; } */

body {
 background-color:#aaa;
 font-family:tahoma;
 font-size:12px;
}
a {
 text-decoration: none;
 outline:none；
}
a:focus {
 -moz-outline:none;
 outline:none;
}

#window {
 background-color:threedface;
 position:absolute;
 width:850px;   
 height:500px;
 left:10%;
 top:10%;

 border:1px solid;
 border-top-color:threedlightshadow;
 border-left-color:threedlightshadow;
 border-right-color:windowframe;
 border-bottom-color:windowframe;

 z-index:2;
}

#workspace {
 background-color:#ece9d8; /*threedface*/
 overflow:auto;

 position:absolute;
 width:98%;
 height:84%;
 top:51px;
 left:8px;
 right:0;
 bottom:74px;
 z-index:3;

 border:1px solid;
 border-top-color:threeddarkshadow;
 border-left-color:threeddarkshadow;
 border-right-color:threedhighlight;
 border-bottom-color:threedhighlight;
}

#myimg {
 display:none;
 position:absolute;
 margin:3px;
}
#canvas, #canvastemp { 
 display:none;
 position:absolute;
 margin:3px;
 background-color:transparent;
 border:1px solid #666666;
 /* background-image:url(back.gif);  */
}
#shapes{
 position:absolute;
 margin:3px;
}

#titlebar, #menubar, #statusbar, #resize {
 background-color:threedface;
 z-index:10;
 position:absolute;
}

#titlebar {
    left:2px;
 top:2px;
 height:22px;
 width:99.4%;
 overflow:hidden;

}
#gradient {
 width:100%;
 }
#menubar {
    left:0px;
 top:27px;
 height:20px;
 width:100%;
 list-style:none;
 margin:0;padding:0;
 z-index:10;
 border-bottom:1px solid threedshadow;
}

#menubar li {
 border:0px;
 margin:0;
 margin-top:1px;
 font:menu;
 float:left;
 padding:1px;
 padding-left:0.4em; padding-right:0.4em;
 cursor:default;
}

#statusbar {
 z-index:6;
 left:8px;
 bottom:0;
 height:26px;
 width:98%;
 border-top:1px solid threedhighlight;
 padding-top:2px;
}

#resize {
 z-index:100;
 bottom:0; right:0;
 width:15px; height:15px;
 background:transparent url('../resize.gif') 3px 3px no-repeat;
 cursor:nw-resize;
}

#titlebar canvas {
 position:absolute;
 width:100%;
}
#titlebar h1 {
 background:transparent url('../cut.gif') 1px 2px no-repeat;
 position:absolute;
 color:captiontext;
 font-size:12px;
 margin:0;padding:0;
 padding-left:20px;
 padding-top:2px;
 cursor:default;
}
#titlebar h2 {
 position:absolute;
 color:yellow;
 font-size:12px;
 margin:0;padding:0;
 right:8px;
 padding-top:2px;
 cursor:default;
}
#statusbar2 {
 margin-left:0px;
}

#statusbar2 > div {
 float:left;
}

#statusbar2 #status { float:left; width:57%;}
#statusbar2 #xy  { float:left; width:20%;}
#statusbar2 #txy  { float:left; width:20%;}

#status div, #xy div, #txy div {
 padding:3px;
 border:1px solid;
 border-top-color:threedshadow;
 border-left-color:threedshadow;
 border-right-color:threedhighlight;
 border-bottom-color:threedhighlight;
 height:1.3em;
 *height:1.7em;
 line-height:1.3em;
 overflow:hidden;
}
</style>
<script>
var mode = 1;
var inout = toubai = 0;
var img, imgurl = '', imgdata = '';
var p = '';
var xydir = 15;
var startangle=0, endangle=(math.pi/180)*270;
var m;
var win, wsp, canvas, c, canvastemp, ctemp, shapes;
var w,h,f;
var isshift = 0;
var shape = 0;
var theobject = null;
var dx, dy, dw, dh;
var des = '';
var iface = { dragging:false, resizing:false, status:null, xy:null, txy:null }
var anyt = 1;

var isie = /msie/i.test(navigator.useragent);
var isff = /firefox/i.test(navigator.useragent);

window.onload = function()
{  
 win = document.getelementbyid('window');
 wsp = document.getelementbyid('workspace');

 img = document.getelementbyid('myimg');
 canvas = document.getelementbyid('canvas');
 canvastemp = document.getelementbyid("canvastemp");
 shapes = document.getelementbyid('shapes');
 rects = document.getelementbyid('rect');
 
 win.style.left = document.body.clientwidth/2-425+'px';
 if (canvas.getcontext)
 {
  c = canvas.getcontext("2d");  
  c.linewidth = 1;
  c.strokestyle = '#f00'; 
  c.fillstyle = "rgba(255,255,255,0.3)";
  c.strokefill = 1;

  ctemp = canvastemp.getcontext("2d");
  ctemp.linewidth = 1;
  ctemp.strokestyle = '#f00';  
  ctemp.fillstyle = "rgba(255,255,255,0.3)";
  ctemp.strokefill = 1;
   
  var gradientcanvas = document.getelementbyid('gradient');
  if (gradientcanvas.getcontext)
  {
   var g = gradientcanvas.getcontext('2d');
   var grad = g.createlineargradient(0, 0, 1200, 22); 
   grad.addcolorstop(0, '#036');
   grad.addcolorstop(1, '#acf');
   g.fillstyle = grad;
   g.fillrect(0, 0, 1200, 22);
  }
  
  iface.status = document.getelementbyid('status').firstchild;
  iface.xy = document.getelementbyid('xy').firstchild;
  iface.txy = document.getelementbyid('txy').firstchild;
  
  document.onmouseup = window.onmouseup = bodyup;
  document.onmousemove = window.onmousemove = bodymove;
  document.onkeydown = window.onkeydown = keydown;
  document.onkeyup = window.onkeyup = keyup;
  img.onmousedown = canvas.onmousedown = canvastemp.onmousedown = shapes.onmousedown = c_down;
  img.onmousemove = canvas.onmousemove = canvastemp.onmousemove = shapes.onmousemove = c_move;
  img.onmouseup = canvas.onmouseup = canvastemp.onmouseup = shapes.onmouseup = c_up;
  img.onmouseo教程ut = canvas.onmouseout = canvastemp.onmouseout = c_out;
 }
 else //不支持canvas属性
 {
  alert('不支持canvas');  
 }

}

function openimg()
{
 var form = document.upimg;

 var file = form.ifile.value;
 var pos = file.lastindexof('.');
 var ext = file.substring(pos + 1).tolowercase();
 if (ext != 'jpg' && ext != 'gif' && ext != 'bmp' && ext != 'png')
 {
  alert('错误：上传图片必须是 jpg/gif/bmp/png 格式！');
  return;
 }
 form.submit.click();
 document.getelementbyid('upimg').style.display = 'none';
}

function upimg(url, size, ww, hh, ff)
{ 
 shape = 0;
 des = '大小:'+size+' 字节    帧数:'+ff+' 帧    宽度:'+ww+' 像素    高度:'+hh+' 像素';
 iface.status.innerhtml=des;
 imgurl = url;
 imgdata = 'imgurl='+imgurl+';';
 if (ww>800) {w = 800; h = hh/(ww/800);}
 else {w = ww; h= hh;} 
 f = ff;
 //img.src = imgurl;
 document.getelementbyid('myimg').style.display = 'block';
 document.getelementbyid('myimg').src = imgurl;
 canvas.style.display='block';
 canvastemp.style.display='block';
 canvas.width = canvastemp.width = w;
 canvas.height = canvastemp.height = h;
 canvas.style.width = canvastemp.style.width = w+'px';
 canvas.style.height = canvastemp.style.height = h+'px';
 c.clearrect(0, 0, canvas.width, canvas.height);
 ctemp.clearrect(0, 0, canvastemp.width, canvastemp.height);
 c.strokestyle = '#f00'; 
 c.fillstyle = "rgba(255,255,255,0.3)";
 ctemp.strokestyle = '#f00';  
 ctemp.fillstyle = "rgba(255,255,255,0.3)";
}

function init(t)
{
 if (imgurl == '') {alert('请先上传图片！');return;}
 else alert("当前版本是演示版！");
}
function reset()
{
 if (imgurl == '') {alert('请先上传图片！');return;}
 else alert("当前版本是演示版！");
}
function clip()
{
 if (imgurl == '') {alert('请先上传图片！');return;}
 else alert("当前版本是演示版！");
}

function hover(o)
{
 o.style.border = "1px solid";
 o.style.bordercolor = "threedhighlight threeddarkshadow threeddarkshadow threedhighlight";
}
function hoverout(o)
{
 o.style.border = "0px solid transparent";
}

function help()
{
 document.getelementbyid('help').style.display='block';
}
function about()
{
 document.getelementbyid('about').style.display='block';
}
function wrong(str)
{
 alert(str);
}
</script>
<!--[if ie]>
 <script type="text/网页特效" src="js/excanvas.js"></script>
 <![endif]-->
</head>

<body id="body">
<form name="build" enctype="multipart/form-data"><input type="hidden" name="imgdata"><input type="hidden" name="region"><input type="hidden" name="back"><input type=submit name=submit style="position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;");></form>

<div id="window">

 <div id="titlebar" onmousedown="windowdrag(event)" oncontextmenu="return false"><canvas id="gradient" height="22"></canvas><h1 style="margin-top:2px;">图片裁剪工具</h1><h2 style="margin-top:1px;"><a href="javascript:help();" hidefocus="true"><font color=yellow>操作说明</font></a>  <a href="javascript:about();" hidefocus="true"><font color=yellow>关于我们</font></a></h2>
 </div>
 <ul id="menubar" oncontextmenu="return false">
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="document.getelementbyid('help').style.display='none';document.getelementbyid('about').style.display='none';document.getelementbyid('set').style.display='none';document.getelementbyid('upimg').style.display='block';"> 上传图片(<u>u</u>)</li>
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(1);">矩形裁剪(<u>r</u>)</li> 
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(2)">圆形裁剪(<u>o</u>)</li>
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(3)">圆角矩形裁剪(<u>c</u>)</li>
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(4)">圆弧裁剪(<u>a</u>)</li>
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(5)">多边形裁剪</li>
  <li style="top:0px;margin-left:-3px;padding-left:0px;margin-top:-2px;padding-top:0px;padding-bottom:0px;"><input type="radio" name="any" id="line" hidefocus disabled checked>直边<input type="radio" name="any" id="curve" hidefocus disabled>曲边</li>
  <li onmouseover="hover(this)" onmouseout="hoverout(this)" onclick="init(6)">任意图形裁剪(<u>m</u>)</li>
  <li style="margin-top:0px;margin-right:7px;*margin-right:5px;float:right;padding-top:1px;*padding-top:2px;padding-bottom:1px;*padding-bottom:0px;border:1px solid threeddarkshadow;color:red" onclick="clip()">裁剪</li>
  <li style="margin-top:0px;margin-right:7px;*margin-right:5px;float:right;padding-top:1px;*padding-top:2px;padding-bottom:1px;*padding-bottom:0px;border:1px solid threeddarkshadow;color:red" onclick="reset()">重置</li>
  <li style="margin-top:0px;margin-right:7px;*margin-right:5px;float:right;padding-top:1px;*padding-top:2px;padding-bottom:1px;*padding-bottom:0px;border:1px solid threeddarkshadow;color:red" onclick="document.getelementbyid('set').style.display='block'">设置</li>
 </ul>
   
 <div id="workspace" oncontextmenu="return false">
  <img id="myimg">
  <canvas id="canvas" oncontextmenu="return false"></canvas>
  <canvas id="canvastemp" oncontextmenu="return false"></canvas>
  <div id="shapes">
   <table class=resizeme id=rect style="position:absolute;z-index:100;border:0px dotted #ff0000;width:100;height:100;display:none;" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
  </div>
 </div>

 <div id="statusbar" oncontextmenu="return false"><div id="statusbar2">
  <div id="status"><div> </div></div>
  <div id="xy"><div> </div></div>
  <div id="txy"><div> </div></div>
 </div></div>
 <div id="resize" onmousedown="windowresize(event, this)" oncontextmenu="return false"></div>

 <form id="upimg" name="upimg" action="upload.php" method="post" enctype="multipart/form-data" target="_frame" style="position:absolute;background-color:#036;left:50%;top:50%;margin-left:-163px;*margin-left:-175px;margin-top:-80px;width:325px;*width:350px;padding-top:3px;padding-left:3px;padding-bottom:3px;padding-right:3px;z-index:12;display:none">
  <div style="background-color:#036;padding-top:1px;padding-left:2px;color:captiontext;font-size:12px;height:20px"><b> 上传图片</b></div>
  <div style="background-color:threedface;padding-top:6px;padding-bottom:6px;padding-left:10px;"><input size="24" type="file" name="ifile" onchange="openimg();" style="height:22px"> <input type="button" value=" 取 消 " style="height:22px" onclick="document.getelementbyid('upimg').style.display='none'"><input type=submit name=submit style="position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;"></div>
 </form>
 
 <form id="set" name="set" style="position:absolute;background-color:#036;left:50%;top:50%;margin-left:-125px;margin-top:-80px;width:250px;padding-top:3px;padding-left:3px;padding-bottom:3px;padding-right:3px;z-index:12;display:none">
  <div style="background-color:#036;padding-top:1px;padding-left:2px;color:captiontext;font-size:12px;height:20px"><b> 设置</b></div>
  <div><div style="background-color:threedface;padding-top:6px;padding-bottom:6px;padding-left:24px">裁剪方向：<input type="radio" name=inout id=isin hidefocus checked>裁剪内部 <input type="radio" name=inout id=isout hidefocus>裁剪外部<p style="margin-top:3px;margin-bottom:3px">背景颜色：<input type="radio" name=toubai id=istou value=0 hidefocus checked>透明背景 <input type="radio" name=toubai id=isbai value=1 hidefocus>白色背景</div><div style="background-color:threedface;padding-bottom:8px;"><center><input type="button" value=" 确 定 " style="height:22px" onclick="setting()">      <input type="button" value=" 取 消 " style="height:22px" onclick="document.getelementbyid('set').style.display='none'"></center></div></div>
 </form>
 
 <div id="help" style="position:absolute;background-color:#036;left:50%;top:50%;margin-left:-210px;margin-top:-170px;width:420px;padding-top:3px;padding-left:3px;padding-bottom:3px;padding-right:3px;z-index:12;display:block">
  <div style="background-color:#036;padding-top:1px;padding-left:2px;color:captiontext;font-size:12px;height:20px"><b> 操作说明</b></div>
  <div><div style="background-color:threedface;padding-top:6px;padding-bottom:6px;padding-left:10px;padding-right:10px"><center><font color=red>【鼠标操作说明】</font></center><p style="margin-top:6px;margin-bottom:6px">[1] 鼠标拖动裁剪框可移动裁剪区域的位置,此操作适用于矩形裁剪，圆形裁剪，圆角矩形裁剪，圆弧裁剪。<p style="margin-top:4px;margin-bottom:4px">[2] 鼠标拉拽裁剪框边框可调整裁剪区域的大小,此操作适用于矩形裁剪，圆形裁剪，圆角矩形裁剪，圆弧裁剪。<p style="margin-top:8px;margin-bottom:8px"><center><font color=red>【键盘操作说明】</font></center><p style="margin-top:6px;margin-bottom:6px">[3] 按←↑↓→键可精确移动裁剪区域的位置，此操作适用于矩形裁剪，圆形裁剪，圆角矩形裁剪，圆弧裁剪。<p style="margin-top:4px;margin-bottom:4px">[4] 按jklm键可精确调整裁剪区域的大小，此操作适用于矩形裁剪，圆形裁剪，圆角矩形裁剪，圆弧裁剪。<p style="margin-top:4px;margin-bottom:4px">[5] 按a键减小圆角矩形的圆角角度,按d键增大圆角矩形的圆角角度,此操作适用于圆角矩形裁剪。<p style="margin-top:4px;margin-bottom:4px">[6] 按awsd键可调整圆弧的弧度,此操作适用于圆弧裁剪。<p style="margin-top:8px;margin-bottom:8px"><center><font color=red>【shift操作说明】</font></center><p style="margin-top:6px;margin-bottom:6px">[7] 拉拽鼠标的同时按shift键可按宽与高1:1的比例调整裁剪区域的大小，此操作适用于矩形裁剪，圆形裁剪，圆角矩形裁剪。</div><div style="background-color:threedface;padding-bottom:8px;"><center><input type="button" value=" 关 闭 " style="height:22px" onclick="document.getelementbyid('help').style.display='none'"></center></div></div>
 </div>
 
 <div id="about" style="position:absolute;background-color:#036;left:50%;top:50%;margin-left:-190px;margin-top:-120px;width:380px;padding-top:3px;padding-left:3px;padding-bottom:3px;padding-right:3px;z-index:12;display:none">
  <div style="background-color:#036;padding-top:1px;padding-left:2px;color:captiontext;font-size:12px;height:20px"><b> 关于我们</b></div>
  <div><div style="background-color:threedface;padding-top:8px;padding-bottom:6px;padding-left:10px"><center><font color=red>【本站宗旨】</font></center><p style="margin-top:6px;margin-bottom:6px">● 本站旨在为广大网民提供最专业最全面的图片裁剪服务.<p style="margin-top:8px;margin-bottom:8px"><center><font color=red>【站点说明】</font></center><p style="margin-top:6px;margin-bottom:6px">● 本站提供以下服务：图片裁剪，照片裁剪，矩形裁剪，圆形裁剪，弧形裁剪，多边形裁剪，任意图形裁剪，动态图片裁剪.<p style="margin-top:8px;margin-bottom:8px"><center><font color=red>【联系我们】</font></center><p style="margin-top:6px;margin-bottom:6px">● 对本站如有疑问之处请与我们联系：service@caijian.cc.</div><div style="background-color:threedface;padding-bottom:8px;"><center><input type="button" value=" 关 闭 " style="height:22px" onclick="document.getelementbyid('about').style.display='none'"></center></div></div>
 </div>
 
 <div style="display:none;">
  <iframe id="_frame" name="_frame"></iframe>
 </div> 
 
</div>
</body>
</html>

upload.php文件
<?php
 if (stripos($_server[ "http_host"], 'caijian.cc') === false) exit(0);
 if ((($_files["ifile"]["type"] == "image/gif")
  || ($_files["ifile"]["type"] == "image/jpeg")
  || ($_files["ifile"]["type"] == "image/pjpeg")
  || ($_files["ifile"]["type"] == "image/bmp")
  || ($_files["ifile"]["type"] == "image/png"))
  && ($_files["ifile"]["size"] < 3000000))
 {
  if ($_files["ifile"]["error"] > 0)
  {
   echo  "<script language='javascript'>" ;
   echo  "parent.wrong('上传图片出错,请重新上传！');";
   echo  "</script>";
  }
  else
  {
   $filename = "upload/".date("ymdhis",time()).rand(100,999).substr($_files["ifile"]["name"],strrpos($_files["ifile"]["name"],'.'));
   move_uploaded_file($_files["ifile"]["tmp_name"], $filename);
   
   $magick_wand = newmagickwand();
   magickreadimage($magick_wand, $filename);
   $w = magickgetimagewidth($magick_wand);
   $h = magickgetimageheight($magick_wand);
   $f = magickgetnumberimages($magick_wand);
   
   echo  "<script language='javascript'>" ;
   echo  "parent.upimg('".$filename."',".$_files["ifile"]["size"].", $w, $h, $f);";
   echo  "</script>";
  }
 }
 else
 {
  echo  "<script language='javascript'>" ;
  echo  "parent.wrong('上传照片尺寸不得大于3m！');";
  echo  "</script>";
 }
?>

源码下载地址
http://down.zzzyk.com/php/2011/0311/22879.html

补充：Php教程,Php高级应用

上一个：php 自动分页类函数
下一个：php 文件图片上传类程序

更多图片编程知识:
更多php疑问解答：
php使用imagick将image图片转化为字符串模式
php通过gd实现图片图片转换为字符图代码
PHP把图片转base64代码，php把base64代码转换为图片并保存
PHP把图片base64转换成图片并保存成文件
wordpress问题<?php if(have_posts()) : ?>
建设一个搜索类网站php还是jsp，数据库那个好
没理由啊 php代码无法执行，貌似有语法错误。。。
关于PHP 和API 的一段代码不懂啊不懂，请高手指点！ 这是淘宝API的
php语言中，序列化到底在那里使用？它的优势是什么？劣势是什么？
PHP函数等于或等于应该怎么表达
请教php高手，解决basename函数和mb_substr函数处理中文文件名称的解决方法，在上传文件时，总是出现乱码
.NET，PHP，JAVA，JS优秀点分别是？
织梦cms 在环境监测的时候 wamp5 gd不支持 是为什么。;extension=php_gd2.dll这一句我删除了还是不显示？
我想学PHP。1.应安装什么编程工具？ 2. 装LIUNX系统是装简易的还是？什么版本的？3.还应安装什么？
<?php 和 <? 有什么区别
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，