当前位置:首页 > 技术 > 正文内容

php+js实现图片的上传、裁剪、预览、提交

醉清风2019-08-31技术5563

首先用到的语言是php、插件imgareaselect(下载地址:http://odyniec.net/projects/imgareaselect/),没有太多花哨的样式,代码如下:

<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
$('#selectbanner').data('x',selection.x1);
$('#selectbanner').data('y',selection.y1);
$('#selectbanner').data('w',selection.width);
$('#selectbanner').data('h',selection.height);
 
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#ferret > img').css({
width: Math.round(scaleX * 512) + 'px',//512、390是你上传图片的宽高
height: Math.round(scaleY * 390) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
 
//这里通过jQuery语法在原来图片后插入预览的小图片
$(document).ready(function () {
$('<p id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><p>').css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
 
.insertAfter($('#selectbanner'));
 
$('#selectbanner').imgAreaSelect({
selectionColor: 'blue', x1:0, y1:0, x2: 100,//初始位置
maxWidth:500,y2:100,
aspectRatio: '1:1',//缩放比例
selectionOpacity: 0.2 ,
onSelectEnd: preview //裁剪后执行的函数,在上面
});
//确认裁剪
$("#sliceButton").click(function() {
var pic = $('#selectbanner').attr('src');
// alert(pic);
var x,y,w,h;
$.post(
"cat.php", //(2)将附上这个页面的代码
{
x:$('#selectbanner').data('x'),
y:$('#selectbanner').data('y'),
w:$('#selectbanner').data('w'),
h:$('#selectbanner').data('h'),
pic:pic
},
function(data){
// alert(data);
//把裁剪后图片加载到#sure
if(data){
$('#sure').attr('src',data);
}
}
);
});
})
</script>
<title>图片裁剪、预览</title>
</head>
<body>
<?php
//上传图片后,把图片复制到upload文件夹下面
if($_POST){
$photo = $_FILES['img']['name'];
$tmp_addr = $_FILES['img']['tmp_name'];
 
$path = 'upload/';
$type=array("jpg","gif","jpeg","png");
$tool = substr(strrchr($photo,'.'),1);
if(!in_array(strtolower($tool),$type)){
$text=implode('.',$type);
echo "您只能上传以下类型文件: ",$text,"<br>";
}else{
$filename = explode(".",$photo); //把上传的文件名以"."好为准做一个数组。
$time = date("m-d-H-i-s"); //取当前上传的时间
$filename[0] = $time; //取文件名
$name = implode(".",$filename); //上传后的文件名
$uploadfile = $path.$name;
$_SESSION['upfile'] = $uploadfile;//上传后的文件名地址
move_uploaded_file($tmp_addr,$uploadfile);
}
// echo $uploadfile;
}
?>
<p id="s">
<!--上传图片-->
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="img" name="img" value="" onclick=""/>
<input name="submit" id="submit" type="submit" value="提交" class="submit"/>
</form>
<!--显示图片-->
<? if(isset($_SESSION['upfile'])){?>
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION['upfile'];?>" title="mypic"/>
<? }?>
</p>
<!--确认裁剪-->
<p><input type="submit" id="sliceButton" name="sliceButton" value="sliceButton"></p>
<!--显示裁剪后的图片-->
<p><img id="sure" src="" style="cursor:hand" /></p>
</body>
</html>

处理裁剪操作的页面cat.php的代码:

<?php
function sliceBanner(){
 $x = (int)$_POST['x'];
 $y = (int)$_POST['y'];
 $w = (int)$_POST['w'];
 $h = (int)$_POST['h'];
 
 //剪切后小图片的名字
 $pic = $_POST['pic'];
 $str = explode(".",$pic);
 $type = $str[1];
 $filename = "case.". $type;
 
  $uploadBanner =  $pic;
  $sliceBanner = 'upload/images/'. $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);
 
  //返回新图片的位置
  echo  $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;
}
sliceBanner();
?>

cssjs.zip


扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由红柚酱发布,如需转载请注明出处。

转载请注明出处:https://www.notenet.cn/post/76.html

相关文章

Linux 服务器性能出问题,排查下这些参数指标

Linux 服务器性能出问题,排查下这些参数指标

一个基于 Linux 操作系统的服务器运行的同时,也会表征出各种各样参数信息。通常来说运维人员、系统管理员会对这些数据会极为敏感,但是这些参数对于开发者来说也十分重要,尤其当你的程序非正常工作的时候,...

laravel:分页样式自定义修改上一页下一页

laravel:分页样式自定义修改上一页下一页

以laravel5.5为例:(不同版本可能位置不同)默认的laravel分页模板位置:\vendor\laravel\framework\src\Illuminate\Pagination\resou...

Mysqldump参数大全

Mysqldump参数大全

参数说明–all-databases , -A导出全部数据库。mysqldump -uroot -p –all-databases–all-tablespaces , -Y导出全部表空间。mysqld...

Ubuntu--更改国内镜像源(阿里、网易、清华、中科大)

Ubuntu--更改国内镜像源(阿里、网易、清华、中科大)

ubuntu系统默认的软件更新源是国外的,速度超级慢,用"apt install"安装软件时各种网络问题也是层出不穷(安装ubuntu后忘记修改源结果导致N多次安装半小时然后失败....

Ubuntu 18.04 MYSQL 5.7 无法远程连接解决办法

Ubuntu 18.04 MYSQL 5.7 无法远程连接解决办法

第一netstat -ntpl 查看3306监听在127.0.0.1 的话 改成监听IP为你的IP 或者为0.0.0.0vim  /etc/mysql/mysql.conf.d/mysqld...