首頁 > php教程 > php手册 > PHP Uploadify图片上传裁剪

PHP Uploadify图片上传裁剪

WBOY
發布: 2016-06-06 19:58:11
原創
1001 人瀏覽過

在网站中需要一个图片上传裁剪的功能,借鉴这篇文章Ajax+PHP+jQuery图片截图上传的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标,类似微博等同类网站上传头像要求按比例裁剪的功能,正合适就自己做了个。 文件上传

在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标,类似微博等同类网站上传头像要求按比例裁剪的功能,正合适就自己做了个。


PHP Uploadify图片上传裁剪


文件上传类经常使用到一个叫uploadify的插件,上面提到的文章也结合了uploadify插件的使用,只是现在版本的uploadify一些配置和方法已经改变了(3.2.1版本)。包括jquery.imgareaselect的一些API也有新的变化,在做的过程中通过查询文档才确认了一些功能和配置的用法。

下面是两个插件的地址

uploadify: http://www.uploadify.com/ ( 有 uploadifive(HTML5) 版本和 Flash 版本,顾及不支持HTML5的浏览器,目前建议选择Flash版本 )

jquery.imgareaselect: http://odyniec.net/projects/imgareaselect ( 需先有 jQuery )

具体的流程都相似,客户端uploadify替代表单接收原图,异步上传到服务器,服务器端接收后存储并返回图片文件名,取得文件名后可在浏览器显示出原图,这时在图片元素上配置imgareaselect使其可划定裁剪区域,划定结束后坐标传回服务器,PHP脚本接收换算后的坐标对原图进行裁剪。上面提到的文章中有详细的流程图,作者非常细心。

下面说说我写的过程


上细节:首先是前端的配置

demo.php:

[javascript] view plaincopy

  1. $field = $("input[type='file']");  
  2. $field.uploadify({//配置uploadify  
  3.     'buttonText''选择图片',  //选择按钮显示的字符  
  4.     'swf'       : '/uploadify/uploadify.swf'//swf文件的位置  
  5.     'uploader'  : '/receivePic.php'//上传的接收者  
  6.     'cancelImg' : '/uploadify/uploadify-cancel.png',  
  7.     'folder'    : '/picture',//上传图片的存放地址  
  8.     'auto'      : false,    //选择图片后是否自动上传  
  9.     'multi'     : false,   //是否允许同时选择多个(false一次只允许选中一张图片)  
  10.     'method'    : 'post',  
  11.     'queueSizeLimit' : 1,//最多能选择加入的文件数量  
  12.     'fileTypeExts''*.gif; *.jpg; *.png'//允许的后缀  
  13.     'fileTypeDesc''Image Files'//允许的格式,详见文档  
  14.    
  15.     'onSelect'function(file) {//选择文件后的触发事件  
  16.         $("a.xtPicSubmit").show().click(function(){//自定义的按钮,显示点击执行上传  
  17.             $field.uploadify('upload','*');//此处触发上传  
  18.         });  
  19.         $wrap.find("p.picInfo span").text(file.name);//file.name为选中的图片名称      
  20.     },  
  21.    
  22.     'onUploadSuccess' : function(file, data, response) {  //上传成功后的触发事件  
  23.         $field.uploadify('disable'true);  //(上传成功后)'disable'禁止再选择图片  
  24.         data = JSON.parse(data);  //data为接收方(receivePic.php)返回的数据,稍后描述  
  25.    
  26. //此时开始对取回的数据处理出需要的图片名,宽高,并计算出原图比例尺,开始设定裁剪需要的计算量  
  27.    
  28.         var orignW = data.width,//存储原图的宽高,用于计算  
  29.             orignH = data.height,  
  30.             aspectRatio = JSON.parse(picFormat)[index].width/JSON.parse(picFormat)[index].height,//提前设定的裁剪宽高比,规定随后裁剪的宽高比例  
  31.             frameW = 260,  //原图的缩略图固定宽度,作为一个画布,限定宽度,高度自适应,保证了原图比例  
  32.             frameH = 0,  
  33.             prevFrameW = 140,  //预览图容器的高宽,宽度固定,高为需要裁剪的宽高比决定  
  34.             prevFrameH = 140/aspectRatio,  
  35.             rangeX   = 1,  //初始缩放比例  
  36.             rangeY   = 1,  
  37.             prevImgW = prevFrameW,  //初始裁剪预览图宽高  
  38.             prevImgH = prevFrameW;  
  39.    
  40.         $imgTar = $wrap.find("img.pic"),  //画布  
  41.         $imgCut = $cut.find("img.cutImg");//预览图  
  42.    
  43.         $imgTar.attr("src","/Picture/"+data.filename);//显示已上传的图片,此时图片已在服务器上  
  44.         frameH = Math.round(frameW*orignH/orignW);//根据原图宽高比和画布固定宽计算画布高,即$imgTar加载上传图后的高。此处不能简单用.height()获取,有DOM加载的延迟  
  45.         $cut.find(".preview").css('height',Math.round(prevFrameH)+"px");//设置裁剪后的预览图的容器高,注意此时的高度应由裁剪宽高比决定,而非原图宽高比  
  46.    
  47. //准备存放图片数据的变量,便于传回裁剪坐标  
  48.         CutJson.name = data.filename;  
  49.         CutJson.position = {};  
  50.    
  51. //准备好数据后,开始配置imgAreaSelect使得图片可选区  
  52.         var imgArea = $imgTar.imgAreaSelect({ //配置imgAreaSelect  
  53.             instance: true,  //配置为一个实例,使得绑定的imgAreaSelect对象可通过imgArea来设置  
  54.             handles: true,   //选区样式,四边上8个方框,设为corners 4个  
  55.             fadeSpeed: 300, //选区阴影建立和消失的渐变  
  56.             aspectRatio:'1:'+(1/aspectRatio), //比例尺  
  57.    
  58.             onSelectChange: function(img,selection){//选区改变时的触发事件  
  59.             /*selection包括x1,y1,x2,y2,width,height几个量,分别为选区的偏移和高宽。*/  
  60.                 rangeX   = selection.width/frameW;  //依据选取高宽和画布高宽换算出缩放比例  
  61.                 rangeY   = selection.height/frameH;  
  62.                 prevImgW = prevFrameW/rangeX; //根据缩放比例和预览图容器高宽得出预览图的高宽  
  63.                 prevImgH = prevFrameH/rangeY;  
  64.    
  65. //实时调整预览图预览裁剪后效果,可参见http://odyniec.net/projects/imgareaselect/ 的Live Example  
  66.                 $imgCut.css({  
  67.                     'width' : Math.round(prevImgW)+"px",  
  68.                     'height' : Math.round(prevImgH)+"px",  
  69.                     'margin-left':"-"+Math.round((prevFrameW/selection.width)*selection.x1)+"px",  
  70.                     'margin-top' :"-"+Math.round((prevFrameH/selection.height)*selection.y1)+"px"  
  71.                    
  72.                 });  
  73.             },  
  74.             onSelectEnd: function(img,selection){//放开选区后的触发事件  
  75.                 //计算实际对于原图的裁剪坐标  
  76.                 CutJson.position.x1 = Math.round(orignW*selection.x1/frameW);  
  77.                 CutJson.position.y1 = Math.round(orignH*selection.y1/frameH);  
  78.                 CutJson.position.width  = Math.round(rangeX*orignW);  
  79.                 CutJson.position.height = Math.round(rangeY*orignH);  
  80.             }  
  81.         });  
  82.     }  
  83. });  


此时已经取得了裁剪的坐标,只需将坐标传回服务器交给脚本处理

使用jQuery的ajax方法回传数据:

[javascript] view plaincopy

  1. $("a.getCut").click(function(){  
  2.     $.ajax({  
  3.         type: "POST",  
  4.     url : "cutPic.php",  
  5.     data: { name:data.filename,position:JSON.stringify(CutJson.position) },  
  6.     success: function(data){  
  7.     $imgTar.attr('src',"/picture/cut/"+data); //裁剪成功传回生成的新图文件名,将结果图显示到页面  
  8.     }  
  9.    });  
  10. });  

至此前端的处理就基本完成了(代码省去了一些状态显示,元素变化的处理细节),下面是后端的两个脚本:

首先是接收上传图片的脚本,接收并存储图片后返回图片数据:

receivePic.php

[php] view plaincopy

  1. //上传文件处理代码与往常相同,此处省去..  
  2.    
  3. $arr = getimagesize('/picture/'.$file['name']);  
  4. $strarr = explode("\"",$arr[3]);//分析图片宽高  
  5. $data = array(  
  6.      'filename'=>$file['name'],  
  7.      'width'=>$strarr[1],  
  8.      'height'=>$strarr[3]  
  9.  );  
  10. echo json_encode($data);  

接下来是裁剪,其中也用到了PIPHP_ImageCrop裁剪函数

cutPic.php:

[php] view plaincopy

  1. function PIPHP_ImageCrop($image$x$y$w$h){  
  2.    $tw = imagesx($image);  
  3.    $th = imagesy($image);  
  4.    
  5.    if ($x > $tw || $y > $th || $w > $tw || $h > $th)  
  6.       return FALSE;  
  7.    
  8.    $temp = imagecreatetruecolor($w$h);  
  9.    imagecopyresampled($temp$image, 0, 0, $x$y,  
  10.       $w$h$w$h);  
  11.    return $temp;  
  12. }  
  13.    
  14. $pic = '/picture/'.$_POST['name'];  
  15. $cutPosition = json_decode($_POST['position']);  //取得上传的数据  
  16. $x1 = $cutPosition->x1;  
  17. $y1 = $cutPosition->y1;  
  18. $width = $cutPosition->width;  
  19. $height = $cutPosition->height;  
  20.    
  21. $type=exif_imagetype($pic);  //判断文件类型  
  22. $support_type=array(IMAGETYPE_JPEG , IMAGETYPE_PNG , IMAGETYPE_GIF);  
  23. if(!in_array($type$support_type,true)) {  
  24.     echo "this type of image does not support! only support jpg , gif or png";  
  25.     exit();  
  26. }  
  27. switch($type) {  
  28.             case IMAGETYPE_JPEG :  
  29.                 $image = imagecreatefromjpeg($pic);  
  30.                 break;  
  31.             case IMAGETYPE_PNG :  
  32.                 $image = imagecreatefrompng($pic);  
  33.                 break;  
  34.             case IMAGETYPE_GIF :  
  35.                 $image = imagecreatefromgif($pic);  
  36.                 break;  
  37.             default:  
  38.                 echo "Load image error!";  
  39.                 exit();  
  40. }  
  41.    
  42. $copy = PIPHP_ImageCrop($image$x1$y1$width$height);//裁剪  
  43.    
  44. $targetPic = '/picture/cut/'.$_POST['name'];  
  45.    
  46. imagejpeg($copy$targetPic);  //输出新图  
  47.    
  48. @unlink($pic);//删除原图节省空间  
  49.    
  50. echo $_POST['pic'].'?'.time(); //返回新图地址  

整个过程就完成了。上个效果图:


PHP Uploadify图片上传裁剪


开始的部分很多参考了Ajax+PHP+jQuery图片截图上传 此篇详细的文章,这里再次说明。

后端的交互很轻松,任务主要在于前端两个插件之间的搭建和使用,我的代码写的比较仓促,应该需要更加结构化一点。另外上传文件的各方面控制也是一个风险(类型,大小等),值得更多的考虑。

http://blog.csdn.net/as66t/article/details/11688217



----------------------------------------------------------------------------------------------------------------------

一、功能分析

用户直接上传图片,点击"上传"按钮之后,在图片预览图内可预览图片,然后进行图片的裁剪前预览,当点击"裁剪"按钮时确定裁剪图片,并在"裁剪结果"区域显示裁剪后的效果

(说明:我是将上传文件保存在"/uploads"文件夹中,而截图结果放在"/avatar"文件夹里)

实现效果预览:

 

 

二、解决方案

1、插件的选择

  • jQuery:这个是必备的一个插件可以到官网上下载

http://docs.jquery.com/Downloading_jQuery

  • imgAreSselect:这个是实现客户端上图片区域选择的

http://odyniec.net/projects/imgareaselect/

  • uploadify:实现文件的上传的功能,支持多文件上传,且可定制性非常强。

http://www.uploadify.com/download/

上面的插件是用在客户端上,其实在我这个程序里写PHP时也用了一些插件。其实我之所以写"图像剪裁上传"的起源是因为我看了《PHP快速开发工具箱》想自己练习一下的。该书是有一个网址(http://www.pluginphp.com/),里面有整本书的代码,而且每个插件都相应的demo,非常不错。下面是用到的PHP插件:

  • PIPHP_UploadFile.php:这是一个文件上传功能的php文件

http://www.pluginphp.com/plug-in11.php

  • PIPHP_ImageCrop.php:这个php文件是具有对图片进行裁剪的功能

http://www.pluginphp.com/plug-in15.php

 

2、客户端与服务器之间的交互图

为了便于理解,我先把交互图放在这里。其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤,服务器与客户端之间的交互通过AJAX完成。可以发现,大部分的操作在客户端进行,服务器端与客户端之间的交流只是简单的JSON数据,因此这样给用户的体验是非常高的。

PHP Uploadify图片上传裁剪

截图 1 客户端与服务器之间交互图

 

3、客户端文件

展示给用户的是html页面,为了学习并巩固CSS知识,就和DIV+CSS搭建了下面这样一个前台页面,见截图 2

PHP Uploadify图片上传裁剪

截图 2 前台页面

跟客户端有关的文件主要是一个index.html,而在这个文件里面会引用其他的插件文件,因此可以说,客户端方面只有一个html文件。

另外,由于这里主要讨论客户端与浏览器之间的交互,因此略过CSS方面的内容。这里只列出HTML的代码,首先是部分:

 

图片剪切上传

可以看得出来主要是引用一些插件的文件。上面的文件(包括CSS文件与js文件)都可以从我给的链接里下载到,只是样式表layout.css是我自己写的样式表,大家可以根据自己的CSS知识写出。

接下来是body部分,也许这么看代码比较乱,推荐使用一些带有高亮显示的工具来查看这些代码,比如DreamWeaver等IDE,实在不行,也可以用火狐的"查看源代码"来看。(火狐不仅是一个好浏览器,更是一个极棒的调试器!)

为了方便起见,我去掉诸如"导航条"、页脚版权声明等点缀部分,只给出必要的html代码。

    

    图片上传

    


上传图片 

 

    

    

    

图片预览

    

      

                    

 

裁剪结果:

      

 

裁剪预览:

div id="preview">

 

上面我用颜色区分开主要DIV区,这三块分别代表"上传图片区"、"大图展示区"、"截图结果区"与"选择预览区"。其中三个粗体部分是带有ID属性的空DIV,用来放图片用的。(到时时候动态加载图片到这些DIV中),因此这段代码形成的HTML框架如截图 2所示。(蓝色线条是block元素边界,此效果较是由火狐的插件制作而成):

PHP Uploadify图片上传裁剪

截图 3 页面大体框架

基本的准备工作已经完成,待会儿再继续在这个框架上添加代码。咱们先介绍一下服务器上的PHP是怎么个情况。

 

4、服务器文件

服务器上主要用到两个PHP文件,一个用来处理上传图片的process.php,另外一个则是处理图片截图用的crop.php。不过,process.php文件包括插件PIPHP_UploadFile.php,而crop.php中包括PIPHP_ImageCrop.php插件。(这些插件的地址我在上面已经给出了)

=======

process.php主要接收上传图片,设置限制(比如文件的大小与格式),处理一些上传错误等,最后返回给客户端JSON,里面包含了所上传文件的一些信息(比如路径、大小等);当在客户端点击"上传"按钮的时候,会用异步(AJAX)的方式调用这个php文件。

=======

crop.php主要负责真正裁剪上传的图片,当在客户端返回裁剪的位置后(点击"裁剪"按钮后),以异步方式将数据以JSON的方式传递给服务器,crop.php真正裁剪图片后,将图片另存到网络的目录下,同时返回此图片的存储路径,然后再让客户端显示图片即可

 

三、用到的技术摘要

现在根据上面的交互图继续完善代码。因此我这节会交叉地完善html、js与php代码,并不会单独分开完善,这样在逻辑上会更好理解。

声明:新增的代码部分用粗体表示

 

1、uploadify上传

<script><span> </script>type="text/javascript"  src="/uploadify/jquery.uploadify.v2.1.4.min.js">

    

  $(document).ready(function(){

        //uploadify设置

            $('#pic_upload').uploadify({

                'uploader' : '/uploadify/uploadify.swf',

                'script' : 'process.php',        

                'cancelImg' : '/uploadify/cancel.png',

            });

  }

    

上面的代码只是uploadify这一个插件的配置项而已。为了增强用户体验可以详细配置其他选项,这参考这个插件的官方文档:http://www.uploadify.com/documentation/。上面的'script'选项就是选择服务器的处理脚本,我们这里就使用process.php了。上传文件到服务器后会让服务器自动调用这个程序。那么客户端怎么知道服务器的process.php调用完了呢?如何获取process.php反馈回来的信息呢?——其实uploadify它提供了一个"触发"选项onComplete,就是用来处理服务器的反馈信息的,我们稍后再写这个选项的内容,先看看process.php是返回哪些内容的呢。

 

2、process.php反馈上传信息

process.php的任务就是给浏览器返回JSON数据(至于什么是JSON请参考其它教程,把JSON想像成"键/值"对就可以了,它很方便数据的传输与读取)。在PHP里,一般是先把数据整理成数组的形式,然后使用json_encode()把数据转换成JSON。那process.php应该给浏览器返回什么样的数据呢?

  • 文件是否成功上传        ->    message

  • 文件的上传状态代码        ->    code

  • 文件上传的存放路径        ->    path

  • 图片的宽度                ->    width

  • 图片的高度                 ->    height

  • 图片的缩放比例            ->    scale

  • 图片的名称                ->    name

其中之所以设置图片的缩放比例scale,是因为如果用户上传的图片尺寸太大(比如800x800),浏览器中的DIV会被"撑开",布局会被打乱。因此我们限定在浏览器显示图片的时候任何一边长不能超过400px,否则在显示的时候以等比例缩放。(比如上面的800x800的图上会显示成400x400的,然后浏览器同时设置scale为0.5)。

    另外,这个php文件是调用了PIPHP_UploadFile.php这个插件,用来将上传的文件进行"鉴别"与"搬移"。

下面是process.php的程序:

require_once(dirname(__FILE__)."/../PIPHP_UploadFile.php");

    $response=array(

        'message'=>'未知上传错误',

        'path'=>'',

        'code'=>-4, //上传结果代码,0表示成功,-1表示失败

        'width'=>100,

        'height'=>100,

        'scale'=>1,        //比例尺

        'name'=>''

    );

if (!empty($_FILES))

{

    $name='picture';

    $uploadFile='uploads/';

    $maxLen=9*1024*1024;

 

    $result=PIPHP_UploadFile($name,$uploadFile,$maxLen);

    

    

    $response['code']=$result[0];

    //简单汇报成功情况

    if($result[0]==0)

    {

        $response['message']='上传成功!';

        //$response['message']=$result[2];

        $response['path']=$result[1];

        $response['name']=$result[2];

        

        //获取图像的高度与宽度

        $fileName=iconv("utf-8","gb2312",$result[2]);

        list($width,$height)=getimagesize($_SERVER['DOCUMENT_ROOT'].$uploadFile.$fileName);

        $response['width']=$width;

        $response['height']=$height;

    }

    else

    {            

        switch($result[0])

        {

            case -1: $response['message']="上传失败"; break;

            case -2: $response['message']="文件类型错误";break;

            case -3: $response['message']="文件大小超过限制";break;

            default: $response['message']="错误代码:$result[0]";    

        }    

    }

}

else{

     $response['message']="上传文件出现错误!"."
";

}

    $json_str=json_encode($response);

    echo $json_str;

?>

其实这个程序因为有了if判断语句而显示有点大,其实逻辑还是挺简单的。无论如何,这个程序返回的我上面说的有关图片的上传信息(放在$json_str这变量里了)

 

3、继续改进uplodify的配置

从上面知道,process.php返回的是一个$json_str变量,它里面有图像的路径,这样我们就可以在浏览器中显示图片啦!(注意此时显示的图片已经是在服务器上了)

现在添加uploadify的'onComplete'选项,它告诉浏览器当process.php返回数据时应该怎么做。

$('#pic_upload').uploadify({

    'uploader' : '/uploadify/uploadify.swf',

    'script' : 'process.php',        

    'cancelImg' : '/uploadify/cancel.png',

 

  'onComplete': function(event, ID, fileObj, response, data) {

        json_str=JSON.parse(response);

        var maxSize=400;

        var width=json_str.width;

        var height=json_str.height;

        var scale=json_str.scale;

        if(json_str.code == 0)

        {

             $('#uploadInfo').html(json_str.message+'
平均上传速度:'+ data.speed.toFixed(2) + 'Kb/s');

             //对图像进行缩放

             if(json_str.width > maxSize || json_str.height >maxSize){

                if( json_str.width > json_str.height)

                {

                    width = maxSize;

                    height = maxSize / json_str.width * json_str.height;

                    json_str.scale = maxSize / json_str.width;

                }

                else

                {

                    height = maxSize;

                    width = maxSize / json_str.height * json_str.width;

                    json_str.scale = maxSize / json_str.height;

                }

             }

            

             $('#oriImage').html('PHP Uploadify图片上传裁剪');            

             //同时插入预览图

             $('#preview').empty().html('PHP Uploadify图片上传裁剪').css({

                    overflow:'hidden',

                    width:'150px',

                    height:'150px'

             });                         

        }

        else{

            $('#uploadInfo').html('错误代码['+json_str.code+']:

'+json_str.message+'

');

        }

  },

});

…    

这里的程序主要做两件事,首先(第一种颜色标志处)显示上传的图,不过如果图片太大的话就应该显示缩放后的图,同时将缩放的比例保存到scale变量中;然后(第二处颜色标志处)再初始化裁剪预览图(用jQuery方法),注意这里只是初始化并没有动态显示裁剪预览图,动态显示部分要用imgAreaSelection这个插件完成。下面就开始讲这个插件吧

 

4、用imgAreaSelection获取截图点坐标

关于imgAreaSelection的使用说明请到官方上查看,这里就不再细讲。

由于图片是动态加载的,所以不能事先将这个插件应用到图像上。我们可以设置一个按钮,当图片上传显示后,我们点击这个"加载裁剪框"按钮,将这个插件绑定到图像上。所以我们先在html上添加一个按钮,我是加载那个"图像预览"的DIV里:

    

图片预览

加载裁剪框

                    

      

                    

$(document).ready(function(){

        $('#pic_upload').uploadify({

                …

        });

        //加载裁剪框    

        $('#initCrop').click(function(e){

                ias=$('#oriImage img').imgAreaSelect({instance:true});

                ias.setOptions({ aspectRatio: '1:1', handle:true,

                                 hide:false,

                                 onSelectChange:preview2,

                                 onSelectEnd: function (img, selection) {

                                    json_str.x1=selection.x1;

                                    json_str.y1=selection.y1;

                                    json_str.cropWidth=selection.x2-selection.x1;

                                    json_str.cropHeight=selection.y2-selection.y1;

                                 },

                                });                    

        });

}

这里的onSelectChange选项就是当改变裁剪框时所要调用的函数,这里使用preview2函数名作为值,这个函数我是另外写在下面的,当然你也可以使用匿名函数的。我是为了强调这个函数,所以写成实名函数:

//图像预览函数

    function preview2(img, selection) {

        realWidth=json_str.width * json_str.scale;

        realHeight=json_str.height * json_str.scale;

        sizeWidth=150;sizeHeight=150;

        var scaleX = sizeWidth / selection.width ;

        var scaleY = sizeHeight / selection.height ;

    

        $('#preview img').css({

            width: Math.round(scaleX * realWidth) + 'px',

            height: Math.round(scaleY * realHeight) + 'px',

            marginLeft: - Math.round(scaleX * selection.x1) + 'px',

            marginTop: -Math.round(scaleY * selection.y1) + 'px'

        });

    };

这个函数的功能是实现动态显示截图区域图像的,这个区域大小是150x150像素的一个小框,这里它动态加载css,注意要跟上一节中的uploadify中onComplete中预加载此截图框要联系起来。那里它是这么设置的:

//同时插入预览图

             $('#preview').empty().html('PHP Uploadify图片上传裁剪').css({

                    overflow:'hidden',

                    width:'150px',

                    height:'150px'

             });                         

        }

注意overflow:hidden的含义是将图像里超过这150x150像素的图像隐藏起来。其实这种方法借鉴自:http://odyniec.net/projects/imgareaselect/examples-callback.html

另外的这插件中的onSelectEnd选项配置:当鼠标离开拖选框时,将此裁剪区域的左上角坐标与裁剪区的长、宽存储到json_str变量中,到时候传送给crop.php函数

 

5、将json_str数据传送给crop.php

使用jQuery中的ajax()方法将json_str变量传送给服务器。先在html中添加一个"裁剪"按钮:

这里我使用了

元素,其实没有必要,可以是任何元素,因为我们使用的是强大的jQuery的ajax()方法。

当用户确定要裁剪时,按下此按钮就会调用ajax()方法。我们将处理程序写在head部分的<script>元素中:</script>

//加载裁剪框    

    $('#initCrop').click(function(e){

                …

    });

//裁剪动作,将数据传给服务器,同时ajax返回图片

    $("#crop").click(function(e){

        if(!(typeof json_str == 'undefined'))

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板