欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

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

演示分为HTML和php两部分:

第一部分,HTML代码:

.代码

  1. Jcrop实现图片裁剪
  2. #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
  3. #imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
  4. jQuery(function(){
  5. jQuery('#imghead').Jcrop({
  6. aspectRatio: 1,
  7. onSelect: updateCoords, //选中区域时执行对应的回调函数
  8. onChange: updateCoords, //选择区域变化时执行对应的回调函数
  9. });
  10. });
  11. function updateCoords(c)
  12. {
  13. jQuery('#x').val(c.x); //选中区域左上角横
  14. jQuery('#y').val(c.y); //选中区域左上角纵坐标
  15. //jQuery("#x2").val(c.x2); //选中区域右下角横坐标
  16. //jQuery("#y2").val(c.y2); //选中区域右下角纵坐标
  17. jQuery('#w').val(c.w); //选中区域的宽度
  18. jQuery('#h').val(c.h); //选中区域的高度
  19. };
  20. function checkCoords()
  21. {
  22. if (parseInt(jQuery('#w').val())>0) return true;
  23. alert('请选择需要裁切的图片区域.');
  24. return false;
  25. };
  26. PHP结合JQueryJcrop实现头像图片裁切实例代码

第二部分:PHP处理部分:jquery分享

.代码

  1. if ($_SERVER['REQUEST_METHOD'] == 'POST')
  2. {
  3. $targ_w = $targ_h = 150;
  4. $jpeg_quality = 90;
  5. $src = '../image/b4.jpg';
  6. $img_r = imagecreatefromjpeg($src);
  7. $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
  8. imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
  9. $targ_w,$targ_h,$_POST['w'],$_POST['h']);
  10. header('Content-type: image/jpeg');
  11. imagejpeg($dst_r,null,$jpeg_quality);
  12. exit;
  13. }
  14. ?>

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