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

我们经常可以看到一些网站上有图片剪切的功能，或许你会觉得这一功能炫目华丽，神秘莫测！但是今天介绍的一款专用于图片裁切的插件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本站下载地址：http://www.jb51.net/jiaoben/24768.html

赞 (0)

相关推荐

  • php+js实现图片的上传、裁剪、预览、提交示例

    首先用到的语言是php.插件imgareaselect(下载地址),没有太多花哨的样式,index.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.or

  • PHP图片自动裁切应付不同尺寸的显示

    PHP图片自动裁切应付不同尺寸的显示

    如果做过那种门户站的朋友,肯定知道,一张图片可能会在不同的地方显示,大小不同,比例也不同, 如果只用一张图的话,那么肯定会变形,而且在显示小图的地方,链接 大图,又太浪费了.....用缩略图来处理,也不完美,因为每个地方出现的比例 大小可能都不一样 ,举个例子! 请看上图. 在这个地方,其实调去出来的是一个列表,但是 图片的大小是不一样的,有多大宽有的窄,,当遇到这样的情况的时候 你们怎么办呢,如果直接用原来的地址,肯定是会变形的,如果搞缩略图也不靠谱,这个调去是自动调去的,你根本不知道哪个图片

  • php实现图片按比例截取的方法

    本文实例讲述了php实现图片按比例截取的方法.分享给大家供大家参考,具体如下: filename = 'img/test.jpg'; $all_type = array( "jpg" => array("create"=>"ImageCreateFromjpeg", "output"=>"imagejpeg" , "exn"=>".jpg"),

  • PHP截取指定图片大小的方法

    本文实例讲述了PHP截取指定图片大小的方法.分享给大家供大家参考.具体分析如下: imagecopyresampled($newim, $im, 0, 0, 7, 174, 120, 42, $new_img_width, $new_img_height); // 原始尺寸 120 x 42 imagecopyresampled($newim, $im, 0, 0, 100, 30, 500, 500, $new_img_width, $new_img_height); // 图截出来后放到 5

  • php截取视频指定帧为图片

    截取视频指定帧为图片,php ffmpeg扩展已经完美实现: $movie = new ffmpeg_movie($video_filePath); $ff_frame = $movie->getFrame(1); $gd_image = $ff_frame->toGDImage(); $img="./test.jpg"; imagejpeg($gd_image, $img); imagedestroy($gd_image); 然而问题来了,智能手机拍摄的视频,由于拍摄方向

  • php图片的裁剪与缩放生成符合需求的缩略图

    图片太大且规格不统一,显示的控制需要靠JavaScript来完成,用在移动设备上时显示效果不好且流量巨大,需要对现有图片库的图片进行一次处理,生成符合移动设备用的缩略图,将原来客户端JS做的工作转移到服务器端用PHP的GD库来集中处理. 图片源与需要的大小: 复制代码 代码如下: $src_img = "wallpaper.jpg"; $dst_w = 300; $dst_h = 200; 剪裁图像,保证图像区域最大化显示,并按比例缩放到指定大小. 一开始采用了 imagecopyre

  • PHP实现图片裁剪、添加水印效果代码

    PHP实现图片裁剪、添加水印效果代码

    3.PHP对图像的裁剪 <div> <h4>裁剪之前</h4> <img src="1.png" style="border:1px solid red;"> </div> <?php header("content-type","text/html;charset=utf-8"); /* *图片裁剪 *@param string $filename 图片的ur

  • PHP全功能无变形图片裁剪操作类与用法示例

    本文实例讲述了PHP全功能无变形图片裁剪操作类与用法.分享给大家供大家参考,具体如下: 如果需要图片裁剪,或生成缩略图,这个基本上没有问题,全部需要的功能都在里面,全部都是无变形的. 这里我们划分为四种模式: 1. 任意图片裁剪到指定大小,超过的,剧中裁剪,并且最大化缩放,不够的拉伸, 2. 超过的剧中裁剪,而不足的,不拉伸,即只缩小,不放大裁剪,会产生补白,可以用png透明度来消除 3. 保留全部图片信息.不裁剪,只缩放,不足的补白. 4. 保留全部图片信息.不裁剪,只缩放,不足的不补白,产生

  • PHP实现图片不变型裁剪及图片按比例裁剪的方法

    本文实例讲述了PHP实现图片不变型裁剪及图片按比例裁剪的方法.分享给大家供大家参考,具体如下: 图片不变型裁剪 <?php /** * imageCropper * @param string $source_path * @param string $target_width * @param string $target_height */ function imageCropper($source_path, $target_width, $target_height){ $source_

  • PHP Imagick完美实现图片裁切、生成缩略图、添加水印

    本文实例讲解了PHP使用Imagick 裁切.生成缩略图.添加水印自动检测和处理,支持gif,分享给大家供大家参考,具体内容如下 调用方式: include 'imagick.class.php'; $image = new lib_image_imagick(); $image->open('a.gif'); $image->resize_to(100, 100, 'scale_fill'); $image->add_text('1024i.com', 10, 20); $image-

  • PHP 裁剪图片成固定大小代码方法

    做一个首页调用图像,有时候往往需要获得固定大小的图像,因为首页的图像位置通常由设计人员指定好了,如果是做最新发布图像调用,因为不知道客户会上传什么比例的图像,所以,有时候也就没有办法确定图像的比例,前台页面编写人员通常会采用固定 img 元素高宽的办法来达到控制图像不溢出,但如果图像的比例不是需要的比例,就会造成图像调用后变形,很大程度上影响了页面的美观,有解决的方法是,按照原图比例进行缩放,缩放后的图像难免会有空白,空白处填以颜色,这样虽然图像不变形了,但这样会有很多问题,比如,如果用户发一个

  • php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码 代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适应  *   2. 宽度为空或为零  按高度缩放 宽度自适应  *      3. 宽度,高度到不为空或为零  按宽高比例等比例缩放裁剪  默认从头部居中裁剪  * @param number $width  * @param number $height  */ public function

  • php结合imgareaselect实现图片裁剪

    引用CSS /js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 引用js /js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js html <div> <img src='blank.jpg' id="mainimg"> <

  • PHP图片裁剪函数（保持图像不变形）

    为了完成图片上传之后自动的裁剪,然后在前台显示出裁剪出的图片.需求如上,源码如下: 复制代码 代码如下: <? *exif_imagetype -- 判断一个图像的类型 *说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ // 获得任意大小图像,不足地方拉伸,不产生变形,不留下空白         function my_image_resize($src_file, $dst_f

随机推荐