PHP+jQuery上传图片并对已上载的图片进行裁切

最新推荐文章于 2021-03-20 04:16:21 发布
最新推荐文章于 2021-03-20 04:16:21 发布
阅读量129 收藏
点赞数
分类专栏： PHP 文章标签： PHP jQuery EXT CSS XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_8614/article/details/81926149
版权
PHP+jQuery上传图片并对已上载的图片进行裁切，目前比较流行的技术。上传成功后，插件会自动显示上传后及载切后的部分图像 ，这时你可以自己拖动鼠标划出一个区域，并可以移动这些区域，在最终效果图上会显示你所作的操作，最后点击裁切保存按钮会最终保存图像。 


<?php
session_start(); 
if (strlen($_SESSION['random_key'])==0){
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s'));
	$_SESSION['user_file_ext']= "";
}

$upload_dir = "upload_pic"; 				// 存放上传图片的目录
$upload_path = $upload_dir."/";				// 存放裁切后的图像
$large_image_prefix = "resize_"; 			// 上传后重命名未裁切图片的附加字符
$thumb_image_prefix = "thumbnail_";			// 上传后重命名已裁切图片的附加字符
$large_image_name = $large_image_prefix.$_SESSION['random_key'];     // 上传后未裁切的图片名的命名规则
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];     // 上传后已裁切的图片名的命名规则
$max_file = "3"; 							// 上传图片大小，这里默认3M
$max_width = "500";							// 上传图片的最大宽度
$thumb_width = "100";						// 裁切后小图的初始宽度
$thumb_height = "100";						// 裁切后小图的初始高度
// 以下数组存放允许上传的文件类型
$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
$allowed_image_ext = array_unique($allowed_image_types); 
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext.= strtoupper($ext)." ";
}
//download by http://www.codepub.com
function resizeImage($image,$width,$height,$scale) {
	list($imagewidth, $imageheight, $imageType) = getimagesize($image);
	$imageType = image_type_to_mime_type($imageType);
	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	switch($imageType) {
		case "image/gif":
			$source=imagecreatefromgif($image); 
			break;
	    case "image/pjpeg":
		case "image/jpeg":
		case "image/jpg":
			$source=imagecreatefromjpeg($image); 
			break;
	    case "image/png":
		case "image/x-png":
			$source=imagecreatefrompng($image); 
			break;
  	}
	imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);

	switch($imageType) {
		case "image/gif":
	  		imagegif($newImage,$image); 
			break;
      	case "image/pjpeg":
		case "image/jpeg":
		case "image/jpg":
	  		imagejpeg($newImage,$image,90); 
			break;
		case "image/png":
		case "image/x-png":
			imagepng($newImage,$image);  
			break;
    }

	chmod($image, 0777);
	return $image;
}
//裁切主函数
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
	list($imagewidth, $imageheight, $imageType) = getimagesize($image);
	$imageType = image_type_to_mime_type($imageType);

	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	switch($imageType) {
		case "image/gif":
			$source=imagecreatefromgif($image); 
			break;
	    case "image/pjpeg":
		case "image/jpeg":
		case "image/jpg":
			$source=imagecreatefromjpeg($image); 
			break;
	    case "image/png":
		case "image/x-png":
			$source=imagecreatefrompng($image); 
			break;
  	}
	imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
	switch($imageType) {
		case "image/gif":
	  		imagegif($newImage,$thumb_image_name); 
			break;
      	case "image/pjpeg":
		case "image/jpeg":
		case "image/jpg":
	  		imagejpeg($newImage,$thumb_image_name,90); 
			break;
		case "image/png":
		case "image/x-png":
			imagepng($newImage,$thumb_image_name);  
			break;
    }
	chmod($thumb_image_name, 0777);
	return $thumb_image_name;
}

function getHeight($image) {
	$size = getimagesize($image);
	$height = $size[1];
	return $height;
}

function getWidth($image) {
	$size = getimagesize($image);
	$width = $size[0];
	return $width;
}

$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];


if(!is_dir($upload_dir)){
	mkdir($upload_dir, 0777);
	chmod($upload_dir, 0777);
}


if (file_exists($large_image_location)){
	if(file_exists($thumb_image_location)){
		$thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"裁切区域的图像\"/>";
	}else{
		$thumb_photo_exists = "";
	}
   	$large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"大图\"/>";
} else {
   	$large_photo_exists = "";
	$thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
	$userfile_name = $_FILES['image']['name'];
	$userfile_tmp = $_FILES['image']['tmp_name'];
	$userfile_size = $_FILES['image']['size'];
	$userfile_type = $_FILES['image']['type'];
	$filename = basename($_FILES['image']['name']);
	$file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

	if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

		foreach ($allowed_image_types as $mime_type => $ext) {
			if($file_ext==$ext && $userfile_type==$mime_type){
				$error = "";
				break;
			}else{
				$error = "文件 <strong>".$image_ext."</strong> 不是期望的格式。<br />";
			}
		}
		if ($userfile_size > ($max_file*1048576)) {
			$error.= "图片不要超过 ".$max_file."MB";
		}

	}else{
		$error= "请先选择图像";
	}
	if (strlen($error)==0){

		if (isset($_FILES['image']['name'])){
			$large_image_location = $large_image_location.".".$file_ext;
			$thumb_image_location = $thumb_image_location.".".$file_ext;

			$_SESSION['user_file_ext']=".".$file_ext;

			move_uploaded_file($userfile_tmp, $large_image_location);
			chmod($large_image_location, 0777);

			$width = getWidth($large_image_location);
			$height = getHeight($large_image_location);
			if ($width > $max_width){
				$scale = $max_width/$width;
				$uploaded = resizeImage($large_image_location,$width,$height,$scale);
			}else{
				$scale = 1;
				$uploaded = resizeImage($large_image_location,$width,$height,$scale);
			}
			if (file_exists($thumb_image_location)) {
				unlink($thumb_image_location);
			}
		}
		header("location:".$_SERVER["PHP_SELF"]);
		exit();
	}
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
	$x1 = $_POST["x1"];
	$y1 = $_POST["y1"];
	$x2 = $_POST["x2"];
	$y2 = $_POST["y2"];
	$w = $_POST["w"];
	$h = $_POST["h"];
	$scale = $thumb_width/$w;
	$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}


if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
	$large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
	$thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
	if (file_exists($large_image_location)) {
		unlink($large_image_location);
	}
	if (file_exists($thumb_image_location)) {
		unlink($thumb_image_location);
	}
	header("location:".$_SERVER["PHP_SELF"]);
	exit(); 
}
?>
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta name="generator" content="WebMotionUK" />
	<title>jQuery+php图片裁切</title>
	<script type="text/javascript" src="js/jquery-pack.js"></script>
	<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>

<body>
<?php
if(strlen($large_photo_exists)>0){
	$current_large_image_width = getWidth($large_image_location);
	$current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) { 
	var scaleX = <?php echo $thumb_width;?> / selection.width; 
	var scaleY = <?php echo $thumb_height;?> / selection.height; 

	$('#thumbnail + div > img').css({ 
		width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
		height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
} 

$(document).ready(function () { 
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("请先选择上传图片");
			return false;
		}else{
			return true;
		}
	});
}); 

$(window).load(function () { 
	$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>jQuery+php上传图片并裁切</h1>
<?php
if(strlen($error)>0){
	echo "<ul><li><strong>错误!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
	echo $large_photo_exists." ".$thumb_photo_exists;
	echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">删除图像</a></p>";
	echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">再来一张</a></p>";
	$_SESSION['random_key']= "";
	$_SESSION['user_file_ext']= "";
}else{
		if(strlen($large_photo_exists)>0){?>
		<h2>请拖动鼠标选择裁切区域：</h2>
		<div align="center">
			<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
			<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
				<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
			</div>
			<br style="clear:both;"/>
			<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
				<input type="hidden" name="x1" value="" id="x1" />
				<input type="hidden" name="y1" value="" id="y1" />
				<input type="hidden" name="x2" value="" id="x2" />
				<input type="hidden" name="y2" value="" id="y2" />
				<input type="hidden" name="w" value="" id="w" />
				<input type="hidden" name="h" value="" id="h" />
				<input type="submit" name="upload_thumbnail" value="保存" id="save_thumb" />
			</form>
		</div>
	<hr />
	<?php 	} ?>
	<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
	<input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
	</form>
<?php } ?>
</body>
</html>
iteye_8614
关注
专栏目录
PHP图片上传并自动裁切或手工裁切
11-30
使用方法: 自动裁切: 程序会按照图片的尺寸从中部裁切最大的正方形，并按目标尺寸进行缩略 $t->setSrcImg("img/test.jpg"); $t->setCutType(1);//这一句就OK了 $t->setDstImg("tmp/new_test.jpg"); $t->createImg(60,60); 手工裁切: 程序会按照指定的位置从源图上取图 $t->setSrcImg("img/test.jpg"); $t->setCutType(2);//指明为手工裁切 $t->setSrcCutPosition(100, 100);// 源图起点坐标 $t->setRectangleCut(300, 200);// 裁切尺寸 $t->setDstImg("tmp/new_test.jpg"); $t->createImg(300,200);
thinkphp_图片上传裁剪功能_已迁移
weixin_34289454的博客
09-25 243
为什么80%的码农都做不了架构师？>>> ...
jquery 上传图片自由截取
w2222288的专栏
06-10 962
2014年5月23日 jquery 上传图片自由截取 为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。本文主要是利用jQuery的imgAreaSelect插件实现。 首先引入三个文件： ""~/UI/Scripts/jquery-1.8.2.min.js") %>"> '' rel="style
关于PHP上传文件时配置 php.ini 中的 upload_tmp_dir
weixin_30763455的博客
07-14 521
在《PHP 5.3 入门经典》9.6.3 的试一试中（P235），给出了一个上传文件的例子，这里的文件格式为jpeg图片（image/jpeg）。如果之前未配置 php.ini 中的 upload_tmp_dir 参数，则会出现上传失败的提示信息。看如下代码片段 if(isset($_FILES["photo"])) and $_FILES["photo"]["error"] == UPLO...
php 图片裁剪保存,PHP实现上传裁剪图片
weixin_35930255的博客
03-09 551
本文主要和大家分享PHP实现上传裁剪图片，主要以代码的形式和大家分享，希望能帮助到大家。/ 图片裁剪上传// $source_path = 'E:\www\cylxsh\storage\app\\'.$url; // 原图路径$source_path = storage_path('app\\'.$url); // 原图路径$target_width = 1000; // 目标宽度$...
ajax+php+jquery图片截图上传,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...
weixin_39647734的博客
03-20 105
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的。用的还不熟练，所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来.我用的是ThinkPHP的框架,先将用到的插件分享出来.demo下载ajaxfileupload.js ajax上传文件的插件。jquery.imgareaselect.min.js ...
php 上传图片 裁剪,jQuery+PHP实现上传裁剪图片
weixin_32867521的博客
03-10 285
本文是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割jquery代码(必须在最后面引入)function showCutImg(showImg){var showImg = $(showImg);var changeInput = showImg.parents('.showImgDiv').siblings('.Cu...
PHP+jQuery上传图片并裁切
05-14
PHP+jQuery上传图片并对已上载的图片进行裁切，目前比较流行的技术。上传成功后，插件会自动显示上传后及载切后的部分图像 ，这时你可以自己拖动鼠标划出一个区域，并可以移动这些区域，在最终效果图上会显示你所作...
[图片动画]PHP+jQuery上传图片并裁切_jquery_php_crop.zip
03-17
这个压缩包文件"[图片动画]PHP+jQuery上传图片并裁切_jquery_php_crop.zip"显然是一个示例教程或者代码库，用于教用户如何使用PHP后端与jQuery前端结合实现图片上传和动态裁切的功能。下面我们将深入探讨这个主题，...
php+jquery上传图片并裁切图片
08-23
PHP作为服务器端脚本语言，负责处理文件上传和保存，而jQuery作为客户端JavaScript库，提供用户友好的交互和动态图片裁切。 首先，我们需要在HTML页面上创建一个表单，用于用户选择和提交图片。这个表单通常包含一...
PHP+jQuery图片上传裁切源码
03-26
PHP+jQuery上传图片并对已上载的图片进行裁切，目前比较流行的技术。上传成功后，插件会自动显示上传后及载切后的部分图像，这时你可以自己拖动鼠标划出一个区域，并可以移动这些区域，在最终效果图上会显示你所作的...
带后台管理的超酷jquery+ajax幻灯相册php源码,jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】...
weixin_36485321的博客
03-09 182
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。共享给大家供大家参考，详细如下：jquery上传文件用的formdata，上传进度条需要添加xhr的onprogresshtml代码如下：Ding Jianlong Html总大小；已上传；选择文件：var uploading = false;function upload(){//首先封装一个方法 传入一个监听函数 返回一个绑定...
PHP 上传裁剪图片
陈羽
03-19 1126
// 图片裁剪上传 $source_path = storage_path('app/'.$url); // 原图路径 $target_width = 500; // 目标宽度 $target_height = 300; // 目标高度 $source_info = getimagesize($source_path); //获取图像信息 ...
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
09-14
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约
09-14
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约束条件，采用粒子群算法求解，实现光伏、风电、储能设备的规划。 这是一个使用粒子群算法进行优化的程序。下面我将对程序进行详细的分析和解释。 首先，程序开始时加载了一些数据文件，包括光伏、风电和负荷的数据。然后，定义了一些参数，如蓄电池参数、迭代次数、种群大小、速度更新参数等。 接下来，程序进行了种群的初始化。使用随机数生成种群的初始位置，并初始化速度。然后，对种群中的每个个体进行潮流计算，并计算适应度。适应度的计算包括对电压、网损等进行评估，并考虑了一些约束条件，如储能容量、光伏容量等的限制。 接下来，程序进行了迭代优化过程。在每次迭代中，根据当前的速度和位置，更新粒子的速度和位置。然后，对更新后的粒子进行潮流计算，并计算适应度。如果个体的适应度优于个体历史最佳适应度，则更新个体历史最佳适应度和位置。如果个体的适应度优于全局最佳适应度，则更新全局最佳适应度和位置。 程序通过迭代优化过程不断更新粒子的速度和位置，直到达到指定的迭代次数。最后，程序输出优化结
Cpp-halcono-pencv互相转换
最新发布
09-14
Cpp_halcon_opencv互相转换 python halcon_opencv图像变量互相转换 C++ halcon 和opencv 图像变量互相转换 VS2022工程 无需配置环境即可 使用绝对路径 无需配置 无需配置 无需配置 下载即可编译生成 仅限交流学习使用;仅限交流学习使用;仅限交流学习使用;
Struts2+JSP+jQuery+Jcrop：图片裁剪上传实战
本文档详细介绍了如何在Struts2、JSP、jQuery以及Jcrop的框架下实现图片裁剪并上传的功能。首先，文章的背景是出于业务需求，需要为用户提供自定义头像的裁剪功能，这涉及到前端用户界面的交互和后端Java逻辑的处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值