`
agevs
  • 浏览: 70556 次
  • 来自: 北京
博客专栏
924aba1e-229a-352e-b6d4-f15f3159a438
各种Web前端技巧经验分享...
浏览量：0
文章分类
社区版块
存档分类
最新评论

PHP结合JQueryJcrop实现头像图片裁切实例代码

JavaScriptHTML5jQueryCSS 
阅读更多

  • 看到一些网站上有图片剪切的功能，觉得挺炫，后来找了一款专用于图片裁切的插件，jquery.Jcrop.min.js，用这个插件可以方便的实现这个功能，使用时鼠标在图片上圈选出选区，即可把图片裁切成所选部分，非常适合用于头像的裁切编辑功能。前端UI分享

    演示分为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" 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处理部分：jquery分享

    <?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;
}
?>

     

    请将上述两部分代码分别另存为两个文件，文件名自拟。

分享到：
| 让ie浏览器支持html5标签的实现方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    通过这个实例详解，我们可以看到PHP和JQueryJcrop结合使用，如何实现一个在Web界面上操作简单、功能强大的图片裁切功能。此功能非常适合于社交网络、在线相册、用户头像编辑等需要图片裁切功能的应用场景。

    jquery + .net 上传图片 裁切 实例代码

    这个"jquery + .net 上传图片裁切实例代码"的主题涵盖了两个关键的技术领域：前端的jQuery库和后端的.NET框架。这里我们将深入探讨这两个技术如何协同工作以实现图片上传和裁切功能。 首先，jQuery是一个轻量级的...

    采用Jquery,用PHP程序实现的头像裁切程序实例

    综上所述，这个头像裁切程序实例结合了jQuery的前端交互能力和PHP的后端处理能力，实现了用户友好的头像裁剪功能。用户可以在浏览器中自由调整裁切区域，前端实时显示裁切效果，而后端则根据接收到的参数生成新的...

    jQuery新浪微博头像裁切预览代码

    这个“jQuery新浪微博头像裁切预览代码”是一个实现这一功能的示例，它仿照了新浪微博的头像裁剪功能，让用户在上传图片前可以预览并调整裁剪区域，确保最终裁剪出的图片满足需求。 jQuery是一个广泛使用的...

    jcrop+ajaxuploadfile图片裁切上传oss

    总结来说，这个示例结合了Jcrop的图像裁切功能和AjaxUploadFile的异步文件上传能力，实现了用户友好的图片裁切上传功能，并将图片保存到云端的对象存储服务。在实际项目中，开发者需要根据自己的需求对这些组件进行...

    jquery Jcrop图像裁切插件中文api文档

    jQuery Jcrop 图像裁切插件是一个非常实用的工具，用于在Web应用程序中实现动态的图像裁剪功能。它依赖于jQuery库，提供了一个简单易用的API，使得开发者能够轻松地集成图像裁剪功能。以下是对Jcrop关键知识点的详细...

    PHP jQuery html5头像图片选取上传 v1.1.rar

    PHP jQuery html5头像图片选取上传是一款使用HTML5 jquery实现的PHP图片截取及上传功能，可广泛应用于头像图片裁切上传中，HTML5环境，可方便移植到手机APP中使用。 PHP jQuery html5头像图片选取上传使用方法 ...

    15、jQuery新浪微博头像裁切预览代码

    【标题】"15、jQuery新浪微博头像裁切预览代码"所指的是一段使用jQuery库实现的JavaScript代码，其主要功能是为用户提供类似新浪微博的头像裁剪与预览功能。在微博或者类似的社交网络平台中，用户通常需要上传个人...

    jquery头像预览裁切

    在文件"jquery头像预览裁切代码"中，我们可以期待找到实现这一功能的所有相关代码，包括HTML模板、CSS样式和JavaScript逻辑。开发者可能已经将所有必要的部分整合在一起，使得其他开发者可以方便地复用或者参考这段...

    php+jquery上传图片并裁切图片

    本教程将深入探讨如何结合PHP和jQuery实现这一功能。PHP作为服务器端脚本语言，负责处理文件上传和保存，而jQuery作为客户端JavaScript库，提供用户友好的交互和动态图片裁切。 首先，我们需要在HTML页面上创建一个...

    头像上传裁切预览jquery代码

    在本文中，我们将深入探讨如何使用jQuery实现一个类似于新浪微博的头像上传和裁切预览功能。这个功能在很多Web应用中都非常实用，允许用户在上传头像前进行裁剪，确保图片符合特定的尺寸和形状，比如圆形。我们将...

    jquery图片裁切+PHP文件上传

    《jQuery图片裁切+PHP文件...总结，"jQuery图片裁切+PHP文件上传"方案结合了前端的灵活性和后端的稳定处理，为用户提供了一种便捷、高效的图片处理方式。理解并掌握这一技术，对于开发交互性强的Web应用具有重要意义。

    jQuery实现模拟flash头像裁切上传功能示例

    本文实例讲述了jQuery实现模拟flash头像裁切上传功能。分享给大家供大家参考，具体如下： 是的，jq已经有类似的插件了，或者干脆用flash算了，为什么我还要自己写？因为造（wo）轮（bu）子（hui）也（flash）是一个...

    php图片裁切工具

    源代码会详细解释如何使用PHP进行图片裁切，以及如何结合前端交互来实现动态裁切效果。开发者可以通过阅读和学习这些代码，了解并掌握图片处理的技巧。 总结，PHP图片裁切工具是Web开发中非常实用的辅助工具，通过...

    VB6.0图片裁切的实现 代码实例.rar

    通过以上步骤，VB6.0图片裁切的实现代码实例可以高效地帮助用户完成批量图片的裁剪任务，无论是单张图片还是多张图片，无论是纵向还是横向，都能灵活处理。对于初学者，这个实例是一个很好的学习资料，可以深入了解...

    jQuery UI 实现图片裁切功能

    需要注意的是，虽然 jQuery UI 提供了基础的拖动和大小调整，但完整的图片裁剪功能可能还需要结合其他工具，如 Cropper.js 等插件来实现。在实际开发中，应根据项目需求和用户反馈不断优化和完善这一功能。

Magicbox
Global site tag (gtag.js) - Google Analytics