php 在线切图程序代码
<!doctype html>
<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://www.phprm.com/frame/php1005186.html
转载随意，但请附上文章地址:-)