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 相关文章推荐
php4的session功能评述(一)
Oct 09 PHP
PHP4中session登录页面的应用
Jul 25 PHP
PHP详解ASCII码对照表与字符转换
Dec 05 PHP
php流量统计功能的实现代码
Sep 29 PHP
php实现cookie加密的方法
Mar 10 PHP
php模拟服务器实现autoindex效果的方法
Mar 10 PHP
实例详解PHP中html word 互转的方法
Jan 28 PHP
PHP与SQL语句常用大全
Dec 10 PHP
详解yii2实现分库分表的方案与思路
Feb 03 PHP
yii插入数据库防并发的简单代码
May 27 PHP
php通过header发送自定义数据方法
Jan 18 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
Oct 11 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python中eval与int的区别浅析
2019/08/11 Python
python第三方库学习笔记
2020/02/07 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
企业道德讲堂实施方案
2014/03/19 职场文书
车辆工程专业求职信
2014/06/14 职场文书
给校长的一封检讨书
2014/09/20 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
贫困证明怎么写
2015/06/16 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL