程序師世界是廣大編程愛好者互助、分享、學習的平台，程序師世界有你更精彩！
設為首頁 加入收藏
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> php 在線切圖程序代碼

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+' 字節&nbsp;&nbsp;&nbsp;&nbsp;幀數:'+ff+' 幀&nbsp;&nbsp;&nbsp;&nbsp;寬度:'+ww+' 像素&nbsp;&nbsp;&nbsp;&nbsp;高度:'+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>&nbsp;&nbsp;<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';">&nbsp;上傳圖片(<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>&nbsp;</div></div>
  <div id="xy"><div>&nbsp;</div></div>
  <div id="txy"><div>&nbsp;</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>&nbsp;上傳圖片</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">&nbsp;<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>&nbsp;設置</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>裁剪內部&nbsp;<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>透明背景&nbsp;<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()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;操作說明</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>&nbsp;關於我們</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">● 對本站如有疑問之處請與我們聯系：[email protected].</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.php100.com/php/2011/0311/22879.html


  1. 上一頁:
  2. 下一頁:
關於PHP編程
php入門教程之Zend Studio設置與開發實例，入門教程zend

php入門教程之Zend Studio設置與開發實例，入門教
淮安團購網美團聯盟網賺版網站源碼，淮安團購

淮安團購網美團聯盟網賺版網站源碼，淮安團購淮安團購網，主要是
php之Smarty基本語法和三大變量

php之Smarty基本語法和三大變量 在Smarty模
php文件上傳漏洞簡單分析

文件上傳漏洞這個問題不是php中所存在的只是我們用戶在程序開
PHP雜談《重構-改善既有代碼的設計》之對象之間搬移特性

思維導圖     

截取文件後綴名，截取後綴

截取文件後綴名，截取後綴<?php $str=yang
相關文章
閱讀排行榜
php圖片縮放代碼-按比例縮放或截取指定大小的縮略圖 非常好用的一個方法 php 分頁函數 PHP表單提交後引號前自動加反斜槓的原因及三種辦法關閉php魔術引號，提交後斜槓 取得phpcms網站下所有欄目的內容鏈接 mysql_escape_string()函數用法分析，mysqlescapestring php+mysqli使用面向對象方式更新數據庫實例，mysqli面向對象 Hello World: 第一個PHP擴展 dhtmlxTree目錄樹增加右鍵菜單以及拖拽排序的實現方法 國外比較好的幾個的Php開源建站平台小結 PHP截取中文字符串函數~包括GB2312和UT-8 php simplexmlElement操作xml的命名空間實現代碼
熱門圖文
Java加密技術（九） PHP中nowdoc和heredoc使用需要注意的一點 蘋果-關於js函數 toLocaleString() 在不同平台上顯示日期不一樣的解決辦法 php下關於中英數字混排的字符串分割問題 JSP應用語法詳解大全 （2） C#實現ComboBox自動匹配字符 php shtml生成類帶使用方法 C#基礎概念二十五問
欄目導航
PHP基礎知識PHP綜合PHP入門知識關於PHP編程
Copyright © 程式師世界 All Rights Reserved