<!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>
<title>Jcrop实现图片裁剪</title>
<script src=
"./jquery-1.6.2.min.js"
></script>
<script src=
"./jquery.Jcrop.min.js"
></script>
<link rel=
"stylesheet"
href=
"./jquery.Jcrop.min.css"
rel=
"external nofollow"
type=
"text/css"
/>
<style type=
"text/css"
>
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script language=
"Javascript"
>
jQuery(
function
(){
jQuery(
'#imghead'
).Jcrop({
aspectRatio: 1,
onSelect: updateCoords,
onChange: updateCoords,
});
});
function
updateCoords(c)
{
jQuery(
'#x'
).val(c.x);
jQuery(
'#y'
).val(c.y);
jQuery(
'#w'
).val(c.w);
jQuery(
'#h'
).val(c.h);
};
function
checkCoords()
{
if
(parseInt(jQuery(
'#w'
).val())>0)
return
true;
alert(
'请选择需要裁切的图片区域.'
);
return
false;
};
</script>
</head>
<body>
<img id=
"imghead"
border=0 src=
'./image/b4.jpg'
/ alt=
"PHP结合JQueryJcrop实现图片裁切实例详解,"
>
<form action=
"crop.php"
method=
"post"
onsubmit=
"return checkCoords();"
>
<input type=
"text"
id=
"x"
name=
"x"
/>
<input type=
"text"
id=
"y"
name=
"y"
/>
<input type=
"text"
id=
"w"
name=
"w"
/>
<input type=
"text"
id=
"h"
name=
"h"
/>
<input type=
"submit"
value=
"提交"
>
</form>
</body>
</html>