php+jquery+Jcrop实现下传-截取-保存图片功能

php中文网
发布: 2016-06-13 12:55:22
原创
932人浏览过

php+jquery+Jcrop实现上传-截取-保存图片功能

  现在很我网站都流行会员模块上传头像时添加在线截取图片功能,截取完之后再保存,最近也有很多网友问有没有这个功能啊,网站上有一款只实现前端截取图片功能的,至于保存的话就没实现,具体可以查看实现图片截取+预览功能的jquery插件(http://www.jq-school.com/detail.aspx?id=45),现在分享用php+jquery+jcrop实现上传-截取-保存图片功能的,文章后面可以打包下载,学习php的网友们可以参考哦。

 

前端代码如下:

$(document).ready(function(){
	var bar = $('.bar');
	var percent = $('.percent');
	var showimg = $('#showimg');
	var progress = $(".progress");
	var files = $(".files");
	var btn = $(".btn span");
	$("#fileupload").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");
	$("#fileupload").change(function(){  //选择文件
		$("#myupload").ajaxSubmit({
			dataType:  'json',	//数据&#26684;式为json 
			beforeSend: function() {	//开始上传 
				showimg.empty();	//清空显示的图片
				progress.show();	//显示进度条
				var percentVal = '0%';	//开始进度为0%
				bar.width(percentVal);	//进度条的宽度
				percent.html(percentVal);	//显示进度为0% 
				btn.html("上传中...");	//上传按钮显示上传中
			},
			uploadProgress: function(event, position, total, percentComplete) {
				var percentVal = percentComplete &#43; '%';	//获得进度
				bar.width(percentVal);	//上传进度条宽度变宽
				percent.html(percentVal);	//显示上传进度百分比
			},
			success: function(data) {	//成功
				//获得后台返回的json数据,显示文件名,大小,以及删除按钮
				files.html("<b>"&#43;data.name&#43;"("&#43;data.size&#43;"k)</b> <span class='delimg' rel='"&#43;data.pic&#43;"'>删除</span>");
				//显示上传后的图片
				var img = "upload/face/"&#43;data.pic;
				//判断上传图片的大小 然后设置图片的高与宽的固定宽
				if (data.width>240 && data.height<240){
					showimg.html("@@##@@");
				}else if(data.width<240 && data.height>240){
					showimg.html("@@##@@");
				}else if(data.width<240 && data.height<240){
					showimg.html("@@##@@");
				}else{
					showimg.html("@@##@@");
				}
				//传给php页面,进行保存的图片&#20540;
				$("#src").val(img);
				//截取图片的js
				$('#cropbox').Jcrop({
					aspectRatio: 1,
					onSelect: updateCoords,
					minSize:[240,240],
					maxSize:[240,240],
					allowSelect:false, //允许选择
					allowResize:false, //是否允许调整大小
					setSelect: [ 0, 0, 240, 240 ]
				});
				btn.html("上传图片");	//上传按钮还原
			},
			error:function(xhr){	//上传失败
				btn.html("上传失败");
				bar.width('0')
				files.html(xhr.responseText);	//返回失败信息
			}
		});
	});
	
	$(".delimg").live('click',function(){
		var pic = $(this).attr("rel");
		$.post("action.php?act=delimg",{imagename:pic},function(msg){
			if(msg==1){
				files.html("删除成功.");
				showimg.empty();	//清空图片
				progress.hide();	//隐藏进度条 
			}else{
				alert(msg);
			}
		});
	});
	
});

function updateCoords(c){
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#w').val(c.w);
	$('#h').val(c.h);
};

function checkCoords(){
	if (parseInt($('#w').val())) return true;
	alert('Please select a crop region then press submit.');
	return false;
};
登录后复制

 

php后台代码如下:

极品模板多语言企业网站管理系统1.2.2
极品模板多语言企业网站管理系统1.2.2

【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下: 01、支持多语言扩展(独立内容表,可一键复制中文版数据) 02、支持一键修改后台路径; 03、杜绝常见弱口令,内置多种参数过滤、有效防范常见XSS; 04、支持文件分片上传功能,实现大文件轻松上传; 05、支持一键获取微信公众号文章(保存文章的图片到本地服务器); 06、支持一键

极品模板多语言企业网站管理系统1.2.2 0
查看详情 极品模板多语言企业网站管理系统1.2.2

立即学习PHP免费学习笔记(深入)”;

<?php
$action = $_GET['act'];
if($action=='delimg'){
	$filename = $_POST['imagename'];
	if(!empty($filename)){
		unlink('upload/face/'.$filename);
		echo '1';
	}else{
		echo '删除失败.';
	}
}else{
	$picname = $_FILES['mypic']['name'];
	$picsize = $_FILES['mypic']['size'];
	if ($picname != "") {
		if ($picsize > 1024000) {
			echo '图片大小不能超过1M';
			exit;
		}
		$type = strstr($picname, '.');
		if ($type != ".gif" && $type != ".jpg") {
			echo '图片&#26684;式不对!';
			exit;
		}
		$rand = rand(100, 999);
		$pics = date("YmdHis") . $rand . $type;
		//上传路径
		$pic_path = "upload/face/". $pics;
		move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);
	}
	$size = round($picsize/1024,2);
	$image_size = getimagesize($pic_path);
	$arr = array(
		'name'=>$picname,
		'pic'=>$pics,
		'size'=>$size,
		'width'=>$image_size[0],
		'height'=>$image_size[1]
	);
	echo json_encode($arr);
}
?>

<?php
	if ($_SERVER['REQUEST_METHOD'] == 'POST'){
		//删除会员以前的头像
		if(file_exists($MemberFace)) {
			unlink($MemberFace);
		}
		$MemberFace = sliceBanner("cuteboy");
		echo $MemberFace;
		exit;
	}
	
	function sliceBanner($UserName){
		$x = (int)$_POST['x'];
		$y = (int)$_POST['y'];
		$w = (int)$_POST['w'];
		$h = (int)$_POST['h'];
		$pic = $_POST['src'];
		
		//剪切后小图片的名字
		$str = explode(".",$pic);//图片的&#26684;式
		$type = $str[1]; //图片的&#26684;式
		$filename = $UserName."_".date("YmdHis").".". $type; //重新生成图片的名字
		$uploadBanner = $pic;
		$sliceBanner = "upload/face/".$filename;//剪切后的图片存放的位置
		
		//创建图片
		$src_pic = getImageHander($uploadBanner);
		$dst_pic = imagecreatetruecolor($w, $h);
		imagecopyresampled($dst_pic,$src_pic,0,0,$x,$y,$w,$h,$w,$h);
		imagejpeg($dst_pic, $sliceBanner);
		imagedestroy($src_pic);
		imagedestroy($dst_pic);
		
		//删除已上传未裁切的图片
		if(file_exists($uploadBanner)) {
			unlink($uploadBanner);
		}
		//返回新图片的位置
		return $sliceBanner;
	}
	//初始化图片
	function getImageHander ($url) {
		$size=@getimagesize($url);
		switch($size['mime']){
			case 'image/jpeg': $im = imagecreatefromjpeg($url);break;
			case 'image/gif' : $im = imagecreatefromgif($url);break;
			case 'image/png' : $im = imagecreatefrompng($url);break;
			default: $im=false;break;
		}
		return $im;
	}
?>
登录后复制

 

打包下载

 php+jquery+Jcrop实现下传-截取-保存图片功能  php+jquery+Jcrop实现下传-截取-保存图片功能  php+jquery+Jcrop实现下传-截取-保存图片功能  php+jquery+Jcrop实现下传-截取-保存图片功能
相关标签:
PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号