PHP结合JQueryJcrop实现图片裁切实例详解


Posted in PHP onJuly 24, 2014

我们经常可以看到一些网站上有图片剪切的功能,或许你会觉得这一功能炫目华丽,神秘莫测!但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱。使用这个插件可以很方便的实现这一功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能。

本实例演示分为HTML和php两部分:

第一部分,HTML代码:

<!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("#x2").val(c.x2); //选中区域右下角横坐标
 //jQuery("#y2").val(c.y2); //选中区域右下角纵坐标
 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' />
<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>

第二部分:PHP处理部分crop.php:

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
 $targ_w = $targ_h = 150;
 $jpeg_quality = 90;
 $src = './image/b4.jpg';
 $img_r = imagecreatefromjpeg($src);
 $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
 $targ_w,$targ_h,$_POST['w'],$_POST['h']);
 header('Content-type: image/jpeg');
 imagejpeg($dst_r,null,$jpeg_quality);
 exit;
}
?>

补充:jquery.Jcrop.min.js本站下载地址:https://3water.com/jiaoben/24768.html

PHP 相关文章推荐
分页显示Oracle数据库记录的类之一
Oct 09 PHP
PHP安全配置
Dec 06 PHP
PHP开发者常犯的10个MySQL错误更正剖析
Jan 30 PHP
解析wamp5下虚拟机配置文档
Jun 27 PHP
header导出Excel应用示例
Jan 24 PHP
ThinkPHP关于session的操作方法汇总
Jul 18 PHP
基于PHP实现简单的随机抽奖小程序
Jan 05 PHP
浅谈PHP中类和对象的相关函数
Apr 26 PHP
PHP解决中文乱码
Apr 28 PHP
php检测mysql表是否存在的方法小结
Jul 20 PHP
深入理解PHP中mt_rand()随机数的安全
Oct 12 PHP
thinkphp3.2.0 setInc方法 源码全面解析
Jan 29 PHP
PHP 5.3新增魔术方法__invoke概述
Jul 23 #PHP
php实现与erlang的二进制通讯实例解析
Jul 23 #PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
Jul 23 #PHP
Yii使用CLinkPager分页实例详解
Jul 23 #PHP
ThinkPHP单字母函数(快捷方法)使用总结
Jul 23 #PHP
PHP中的use关键字概述
Jul 23 #PHP
ThinkPHP实现将SESSION存入MYSQL的方法
Jul 22 #PHP
You might like
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
5款非常棒的Python工具
2018/01/05 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python实现飞行棋游戏
2020/02/05 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python破解同事的压缩包密码
2020/10/14 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
优秀生推荐信范文
2013/11/28 职场文书
《太阳》教学反思
2014/02/21 职场文书
总经理工作职责范文
2014/03/14 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
关于爱国的标语
2014/06/24 职场文书
金榜题名主持词
2015/07/02 职场文书
工作建议书范文
2019/07/08 职场文书
解析MySQL binlog
2021/06/11 MySQL