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

首先用到的语言是php、插件imgareaselect(下载地址)，没有太多花哨的样式，index.php代码如下：


代码如下:

<!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 () {
$('<div id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><div>').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;
}
?>
<div 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"/>
<? }?>
</div>
<!--确认裁剪-->
<div><input type="submit" id="sliceButton" name="sliceButton" value="sliceButton"></div>
<!--显示裁剪后的图片-->
< div><img id="sure" src="" style="cursor:hand" /></div>
</body>
</html>

赞 (0)

相关推荐

  • php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码 代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适应  *   2. 宽度为空或为零  按高度缩放 宽度自适应  *      3. 宽度,高度到不为空或为零  按宽高比例等比例缩放裁剪  默认从头部居中裁剪  * @param number $width  * @param number $height  */ public function

  • PHP图片处理之使用imagecopyresampled函数裁剪图片例子

    图片裁剪是指在一个大的背景图片中裁剪出一张指定区域的图片,常见的应用是在用户设置个人头像时,可以从上传的图片中,裁剪出一个合适的区域作为自己的个人头像图片.图像裁剪和图片缩放的相似,所以也是借助imagecopyresampled()函数去实现这个功能.同样也是以JPEG图片格式为例,声明一个图像裁剪函数cut(),代码如下所示: 复制代码 代码如下: <?php     //在一个大的背景图片中裁剪出指定区域的图片,以jpeg图片格式为例     function cut($filename,

  • PHP图像裁剪缩略裁切类源码及使用方法

    PHP图像裁剪缩略裁切类源码及使用方法

    最近在做网页拖拽验证码的开源项目,需要在服务端生成图片对应的可移动的色块,但是网上的资源都是做缩略图,对整个图片进行缩放的,所以自己动手,完成了对图片进行裁剪小块的工具 <?php namespace App\Libs; /** * 2016-01-07 15:54:58 * Lixiaoyu * * mode 1 : 强制裁剪,生成图片严格按照需要,不足放大,超过裁剪,图片始终铺满 * mode 2 : 和1类似,但不足的时候 不放大 会产生补白,可以用png消除. * mode 3 : 只缩

  • php结合imgareaselect实现图片裁剪

    引用CSS /js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 引用js /js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js html <div> <img src='blank.jpg' id="mainimg"> <

  • PHP 裁剪图片成固定大小代码方法

    做一个首页调用图像,有时候往往需要获得固定大小的图像,因为首页的图像位置通常由设计人员指定好了,如果是做最新发布图像调用,因为不知道客户会上传什么比例的图像,所以,有时候也就没有办法确定图像的比例,前台页面编写人员通常会采用固定 img 元素高宽的办法来达到控制图像不溢出,但如果图像的比例不是需要的比例,就会造成图像调用后变形,很大程度上影响了页面的美观,有解决的方法是,按照原图比例进行缩放,缩放后的图像难免会有空白,空白处填以颜色,这样虽然图像不变形了,但这样会有很多问题,比如,如果用户发一个

  • PHP实现图片裁剪、添加水印效果代码

    PHP实现图片裁剪、添加水印效果代码

    3.PHP对图像的裁剪 <div> <h4>裁剪之前</h4> <img src="1.png" style="border:1px solid red;"> </div> <?php header("content-type","text/html;charset=utf-8"); /* *图片裁剪 *@param string $filename 图片的ur

  • JQuery PHP图片在线裁剪实例

    / * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标,w宽度,h高度 通过imagecopy()方法将该区域copy至第一步创建的空白图像中 注意,在创建图像的时候要用imagecreatetruecolor()真彩色,不然用imagecreate()图片会失真 */ 自由图片剪切 无比例 <?php /** * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标

  • PHP实现的自定义图像居中裁剪函数示例【测试可用】

    PHP实现的自定义图像居中裁剪函数示例【测试可用】

    本文实例讲述了PHP实现的自定义图像居中裁剪函数.分享给大家供大家参考,具体如下: 图像居中裁减的大致思路: 1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled - 重采样拷贝部分图像并调整大小) 2.将缩放后的图像放置在裁减区域中间.(imagecopy - 拷贝图像的一部分) 3.裁减图像并保存.(imagejpeg | imagepng | imagegif - 输出图象到浏览器或文件) 具体代码: //==================

  • PHP加Nginx实现动态裁剪图片方案

    许久以前写过一篇也是关于高性能PHP图片动态裁剪方案的文章,那文章使用的是nginx Cache和rewrite实现的,当然再加上CDN,那个方案存在一个问题就是图片并没有实际生成,而是以二进制的形式存在缓存中.如果缓存失效了那么还需要请求php再次生成.如果说到区别这是我暂且认为的吧.利用空余时间,新增了静态生成图片支持,支持对图片3种模式切换,在门户网站自动对图片尺寸进行裁剪,减少服务器带宽,理论上应该也满足了业务的需求吧,图片裁剪使用了Imagick组件. 一.思路再现:1.先写好请求服务

  • PHP图片裁剪函数（保持图像不变形）

    为了完成图片上传之后自动的裁剪,然后在前台显示出裁剪出的图片.需求如上,源码如下: 复制代码 代码如下: <? *exif_imagetype -- 判断一个图像的类型 *说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ // 获得任意大小图像,不足地方拉伸,不产生变形,不留下空白         function my_image_resize($src_file, $dst_f

  • thinkPHP框架实现图像裁剪、缩放、加水印的方法

    本文实例讲述了thinkPHP框架实现图像裁剪.缩放.加水印的方法.分享给大家供大家参考,具体如下: ThinkPHP 图片处理函数,需要文字水印字体,可在windows下 控制面板 > 大图标(右上角) > 字体 找到需要的字体 /** * 图像的裁剪.缩放.加水印 * @param string $path 路径 * @param int $width 裁剪的宽度/限制的高度或宽度,当有$height值时此值为图片的宽度,否则为限制的宽度或高度 * @param int $height [

  • 使用gd库实现php服务端图片裁剪和生成缩略图功能分享

    使用gd库实现php服务端图片裁剪和生成缩略图功能分享

    裁剪示例: 最终裁剪成的图片: 其中虚线框内就是要裁剪出来的图片,最终保存成100宽的图片.代码如下: 复制代码 代码如下: $src_path = '1.jpg';//创建源图的实例$src = imagecreatefromstring(file_get_contents($src_path)); //裁剪开区域左上角的点的坐标$x = 100;$y = 12;//裁剪区域的宽和高$width = 200;$height = 200;//最终保存成图片的宽和高,和源要等比例,否则会变形$fi

随机推荐