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

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

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

第一部分，HTML代码：

Jcrop实现图片裁剪

#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}

#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

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;

};

第二部分：PHP处理部分crop.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;

}

php jcrop,PHP结合JQueryJcrop实现图片裁切实例详解相关推荐

python字库转文字图片_对Python生成汉字字库文字,以及转换为文字图片的实例详解...
对Python生成汉字字库文字,以及转换为文字图片的实例详解发布时间:2020-10-05 17:20:03
CSS图片廊实例详解
效果: <!DOCTYPE html> <html> <head> <style> div.img {margin: 2px;border: 1px s ...
基于vs实现的socket—udp图片传送实例详解
文章目录一.结构体的传送二.Socket缓冲区 2.1 sendto函数工作原理 2.2 recv函数工作原理三.UDP丢包四.UDP数据传输中出现的分包问题的解释五.图片传送 5.1 服务 ...
php 显示要上传的图片格式,php判断文件上传图片格式的实例详解
php判断文件上传图片格式的实例详解判断文件图片类型, $type = $_FILES['image']['tmp_name'];//文件名 //$type = $this->getImage ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
python使用视频_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
android相册和拍照并裁剪图片大小,Android 拍照并对照片进行裁剪和压缩实例详解...
Android 拍照并对照片进行裁剪和压缩实例详解本文主要介绍 Android 调用摄像头拍照并对照片进行裁剪和压缩,文中给出了主要步骤和关键代码. 调用摄像头拍照,对拍摄照片进行裁剪,代码如下. ...
调用百度ai接口实现图片文字识别详解
调用百度ai接口实现图片文字识别详解首先先介绍一下这篇博文是干嘛的,为了不浪费大家时间.公司最近和短视频公司合作,需要监控app的截图上的文字是否符合规范,也就是确保其没有违规的文字.到网上找了一些 ...
html5局部放大图片,js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

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

php jcrop,PHP结合JQueryJcrop实现图片裁切实例详解相关推荐

最新文章

热门文章