imgareaselect+php实现图片裁剪保存

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› PHP›PHP编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

目标：在用户上传头像文件时，对原文件进行固定比例3:2裁剪，同时生成1:1的不同尺寸的头像文件。另外还要在页面上预览。

主页html, index.html

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<style>
    #facediv {display:none;z-index:100;}
    .img_style{float:left; position: relative; overflow: hidden;}
    .img_thumb{width:270px; height:180px;}
    .img_max{width:100px; height:100px;}
    .img_mid{width:50px; height:50px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
</head>

<body>
    <input type="hidden" name="x1" value="0" />
    <input type="hidden" name="y1" value="0" />
    <input type="hidden" name="x2" value="100" />
    <input type="hidden" name="y2" value="100" /> 
    <input id="fileToUpload" name="fileToUpload" type="file" onchange="uploadImage();"/>
    <div id="facediv">
        <img id="face" class="img_style"/>
    </div>
</body>
</html>

js文件,upload.js

upload.js

  1 function uploadImage() {
  2     //上传
  3     $.ajaxFileUpload( {
  4         url : 'photo.php?act=upload',
  5         fileElementId : 'fileToUpload',
  6         dataType : 'json',// 服务器返回的格式，php端用了header ( 'Content-type: application/json' ); 反而提示格式不对。
  7         success : function(data) {
  8             if (data['result'] == 1) {
  9                 $("#facediv").css({"display":"block"});
 10                 $("#face").attr("src",data['path']);
 11                 
 12                 //先清理旧内容
 13                 if($("#preview_3x2").length>0){
 14                     $("#preview_3x2 img").attr("src", data['path']);
 15                     $("#preview_1x1 img").attr("src", data['path']);
 16                     
 17                     $("#btnSubmit").click(function (){
 18                         cutImage(data['path']);
 19                     })
 20                 }else{
 21                     $('<div >)
 22                         .css({
 23                             float: 'left',
 24                             position: 'relative',
 25                             overflow: 'hidden',
 26                             width: '270px',
 27                             height: '180px'
 28                         }).insertAfter($('#face'));
 29                     $('<div >)
 30                     .css({
 31                         float: 'left',
 32                         position: 'relative',
 33                         overflow: 'hidden',
 34                         width: '100px',
 35                         height: '100px'
 36                     }).insertAfter($('#face'));
 37                     
 38                     $('<button >)
 39                     .click(function (){
 40                         cutImage(data['path']);
 41                     }).insertAfter($('#facediv'));
 42                 }
 43                 
 44                 $('#face').imgAreaSelect({
 45                     //maxWidth: 1200, maxHeight: 800,
 46                     minWidth: 270, minHeight: 180,
 47                     //x1:0,y1:0,x2:180,y2:120,
 48                     aspectRatio: '3:2', 
 49                     onSelectChange: function (img, selection) {
 50                         var scaleX = 270 / (selection.width || 1);
 51                         var scaleY = 180 / (selection.height || 1);
 52                         
 53                         var offset_x = Math.round((selection.width-selection.height)/2);
 54                         
 55                         var scaleY_cube = 100 / (selection.height || 1);
 56                         var scaleX_cube = scaleY_cube;
 57                       
 58                         $('#preview_3x2 > img').css({
 59                             width: Math.round(scaleX * img.width) + 'px',
 60                             height: Math.round(scaleY * img.height) + 'px',
 61                             marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
 62                             marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
 63                         });
 64                         
 65                         $('#preview_1x1 > img').css({
 66                             width: Math.round(scaleX_cube * img.width) + 'px',
 67                             height: Math.round(scaleY_cube * img.height) + 'px',
 68                             marginLeft: '-' + Math.round(scaleX * (selection.x1)) + 'px',
 69                             marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
 70                         });
 71                     },
 72                     onSelectEnd: function (img, selection) {
 73                         $('input[name="x1"]').val(selection.x1);
 74                         $('input[name="y1"]').val(selection.y1);
 75                         $('input[name="x2"]').val(selection.x2);
 76                         $('input[name="y2"]').val(selection.y2);
 77                     } 
 78                 });
 79             }
 80         },
 81         error : function(data) {
 82             //alert("upload fail!");
 83         }
 84     });
 85 }
 86 
 87 function cutImage(path) {
 88     $.ajax( {
 89         type : "POST",
 90         url:"photo.php?act=save",
 91         dateType:"json",
 92         data:{
 93             "x1":$('input[name="x1"]').val(),
 94             "x2":$('input[name="x2"]').val(),
 95             "y1":$('input[name="y1"]').val(),
 96             "y2":$('input[name="y2"]').val(),
 97             "path":path
 98         },
 99         success : function(data) {
100             alert("保存成功!");
101         },
102         error:function(data) {
103             alert("保存失败!原因："+data['errors']);
104         }
105     });
106 }

下面是服务器端的php处理文件，根据提交的action作相应的动作，具体步骤如下：

1.首先是把图片上传到服务器保存，然后存储路径转化为url（path）传给客户端；

2.客户端接收消息后判断如果正确保存，则动态创建裁剪预览效果，同时预览3:2和1:1两种效果，默认为3:2，1:2的效果根据3:2的做相应处理；

3.用户选定效果后，隐式提交起始点(x1,y1)和终结点(x2,y2)的坐标；

4.php程序再根据坐标值运用imagic或gd的输出函数生成相应大小的缩略图；

photo.php

  1 <?php
  2 class photo {
  3     private $base_path = '/';
  4     private $upload_path = 'upload';
  5     
  6     function __construct() {
  7         $this->base_path = dirname ( __FILE__ );
  8         $this->upload_path = $this->base_path . '/upload/';
  9     }
 10     
 11     public function upload() {
 12         $rets ['result'] = 0;
 13         if (in_array ( $_FILES ["fileToUpload"] ["type"], array ("image/gif", "image/jpeg", "image/pjpeg" ) )) {
 14             if ($_FILES ["fileToUpload"] ["size"] < 6000000) {
 15                 if ($_FILES ["fileToUpload"] ["error"] > 0) {
 16                     $rets ['debug'] = 'image type is invalid!';
 17                 } else {
 18                     $debug = "upload - " . $_FILES ["fileToUpload"] ["name"];
 19                     $debug .= "type - " . $_FILES ["fileToUpload"] ["type"];
 20                     $debug .= "size - " . ($_FILES ["fileToUpload"] ["size"] / 1024) . " kb";
 21                     $debug .= "temp file - " . $_FILES ["fileToUpload"] ["tmp_name"];
 22                     
 23                     $src_img_file = $this->upload_path . $_FILES ["fileToUpload"] ["name"];
 24                     $dest_img_file = dirname ( $src_img_file ) . '/max_' . $_FILES ["fileToUpload"] ["name"];
 25                     
 26                     if (file_exists ( $src_img_file )) {
 27                         unlink ( $src_img_file );
 28                     }
 29                     if (file_exists ( $dest_img_file )) {
 30                         unlink ( $dest_img_file );
 31                     }
 32                     
 33                     move_uploaded_file ( $_FILES ["fileToUpload"] ["tmp_name"], $src_img_file );
 34                     
 35                     //先将原图等比例生成前台能显示的最大尺寸（这地方是否可以让用户选：1-是等比例缩放后截取，2-是原尺寸截取？）
 36                     /*                    include_once 'image.php';
 37                         $image = new core_image();
 38                         
 39                         $config = array(
 40                             'quality' => 90,
 41                             'source_image' => $src_img_file,
 42                             'new_image' => $dest_img_file,
 43                             'width'=>360,
 44                             'height'=>240
 45                         );
 46                         
 47                         $image->initialize($config)->Resize();
 48                         unlink($src_img_file);*/
 49                     
 50                     $rets ['result'] = 1;
 51                     $rets ['path'] = 'http://localhost/test/image/cut_image/upload/' . $_FILES ["fileToUpload"] ["name"];
 52                     //$rets ['path'] = 'http://localhost/test/image/cut_image/upload/max_' . $_FILES ["fileToUpload"] ["name"];
 53                     $rets ['debug'] = $debug;
 54                 
 55                 }
 56             } else {
 57                 $rets ['debug'] = "file size is too large.";
 58             }
 59         } else {
 60             $rets ['debug'] = "invalid file type";
 61         }
 62         
 63         //header ( 'Content-type: application/json' );
 64         echo json_encode ( $rets );
 65     }
 66     
 67     public function save($rect, $path) {
 68         $rets ['result'] = 0;
 69         $file_parts = explode ( '/upload/', $path );
 70         if (count ( $file_parts ) > 1) {
 71             //$file_parts = explode('/', $string)
 72             $pos = strrpos ( $file_parts [1], '.' );
 73             $filename = substr ( $file_parts [1], 0, $pos );
 74             $ext = substr ( $file_parts [1], $pos );
 75             $source_path = $this->upload_path . $file_parts [1];
 76             
 77             $target_path = $this->upload_path . $filename . '_thumb' . $ext;
 78             $target_path_mid = $this->upload_path . $filename . '_mid' . $ext;
 79             $target_path_max = $this->upload_path . $filename . '_max' . $ext;
 80             
 81             $this->cut_image ( $source_path, $target_path, $rect, 270, 180 );
 82             $this->cut_image ( $source_path, $target_path_mid, $rect, 50, 50 );
 83             $this->cut_image ( $source_path, $target_path_max, $rect, 100, 100 );
 84             
 85             $rets ['result'] = 1;
 86             $rets ['path'] = 'http://localhost/test/image/cut_image/upload/' . $filename . '_thumb' . $ext;
 87             $rets ['debug'] = implode ( ',', $rect );
 88             unlink ( $source_path );
 89         
 90         }
 91         
 92         //header ( 'Content-type: application/json' );
 93         echo json_encode ( $rets );
 94     }
 95     
 96     private function cut_image($source_path, $target_path, $rect, $width, $height) {
 97         include_once 'image.php';
 98         
 99         $image = new core_image ();
100         $image->initialize ( array (
101             'quality' => 90, 
102             'source_image' => $source_path, 
103             'new_image' => $target_path, 
104             'start_x' => $rect ['x1'], 
105             'start_y' => $rect ['y1'], 
106             'end_x' => $rect ['x2'], 
107             'end_y' => $rect ['y2'], 
108             'width' => $width, 
109             'height' => $height ) 
110         )->resize ();
111     
112     }
113     
114     public function test() {
115         $rect = array ('x1' => 100, 'y1' => 87, 'x2' => 575, 'y2' => 562 ); //299 , 87 , 774, 562
116         include_once 'image.php';
117         $image = new core_image ();
118         $image->initialize ( array ('quality' => 90, 
119             'source_image' => "E:/projects/php/test/image/cut_image/upload/Hydrangeas.jpg", 
120             'new_image' => "E:/projects/php/test/image/cut_image/upload/Hydrangeas_thumb.jpg", 
121             'start_x' => $rect ['x1'], 
122             'start_y' => $rect ['y1'], 
123             'end_x' => $rect ['x2'], 
124             'end_y' => $rect ['y2'], 
125             'width' => 400, 
126             'height' => 400 )
127          )->resize ();
128     }
129 }
130 
131 $act = isset ( $_GET ['act'] ) ? $_GET ['act'] : '';
132 
133 if (! empty ( $act )) {
134     $photo = new photo ();
135     if ($act == 'upload') {
136         $photo->upload ();
137     } elseif ($act == "save") {
138         $x1 = $_POST ["x1"];
139         $y1 = $_POST ["y1"];
140         $x2 = $_POST ["x2"];
141         $y2 = $_POST ["y2"];
142         $path = $_POST ["path"];
143         $rect = array ('x1' => $x1, 'y1' => $y1, 'x2' => $x2, 'y2' => $y2 );
144         $photo->save ( $rect, $path );
145     } elseif ($act == 'test') {
146         $photo->test ();
147     }
148 }

另外是一个图片处理类，image.php。我在里面改了一个方法imageProcessGDByRect用户根据两个坐标点来计算宽和高。

image.php

  1 <?php
  2 define ( "IMAGE_CORE_OP_TO_FILE", 1 ); // Output to file
  3 define ( "IMAGE_CORE_OP_OUTPUT", 2 ); // Output to browser
  4 
  5 
  6 define ( "IMAGE_CORE_SC_NOT_KEEP_SCALE", 4 ); // Free scale
  7 define ( "IMAGE_CORE_SC_BEST_RESIZE_WIDTH", 8 ); // Scale to width
  8 define ( "IMAGE_CORE_SC_BEST_RESIZE_HEIGHT", 16 ); // Scale to height
  9 
 10 
 11 define ( "IMAGE_CORE_CM_DEFAULT", 0 ); // Clipping method: default
 12 define ( "IMAGE_CORE_CM_LEFT_OR_TOP", 1 ); // Clipping method: left or top
 13 define ( "IMAGE_CORE_CM_MIDDLE", 2 ); // Clipping method: middle
 14 define ( "IMAGE_CORE_CM_RIGHT_OR_BOTTOM", 3 ); // Clipping method: right or bottom
 15 
 16 
 17 class core_image {
 18     var $image_library = 'gd';
 19     
 20     var $source_image;
 21     var $new_image;
 22     var $width;
 23     var $height;
 24     var $quality = 90;
 25     
 26     var $option = IMAGE_CORE_OP_TO_FILE;
 27     
 28     var $scale;
 29     
 30     // clipping method 0: default 1: left or top 2: middle 3: right or bottom
 31     var $clipping = IMAGE_CORE_CM_MIDDLE; //IMAGE_CORE_CM_MIDDLE;
 32     
 33 
 34     var $start_x = 0; // start X axis (pixel)
 35     var $start_y = 0; // start Y axis (pixel)
 36     var $end_x = 0; // end X axis (pixel)
 37     var  
                       
                    
                     
                      



鲜花




握手




雷人




路过




鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

ajax向php发送请求发布时间：2022-07-10

PHP开发api接口安全验证发布时间：2022-07-10

CVE-2022-34275

GaloyMoney/galoy-mobile

2022-08-30

swcarpentry/matlab-novice-inflammation:

2022-08-17

美国三一学院字怎么样？专业特色有哪些？

2022-11-06

Twzy/MarkWord: a markdown editer

2022-08-18

任意版本MATLAB安装C2000支持包

2022-07-18

阅读排行榜

1 GitbookIO/gitbook:

GitbookIO/gitbook:

阅读：931|2022-08-17

2 juleswhite/mobile-cloud-asgn1

juleswhite/mobile-cloud-asgn1

阅读：1009|2022-08-30

3 CVE-2021-33438

An issue was discovered in mjs (mJS: Restricted JavaScript engine), ES6 (JavaScr

阅读：837|2022-07-29

4 kyamagu/matlab-json: Use official API: h

kyamagu/matlab-json: Use official API: https://mathworks.com/help/matlab/json-fo

阅读：907|2022-08-17

5 墙壁眼睛膝盖

书名:墙壁眼睛膝盖作者:温柔一刀类别:欲望丛林，饮食男女。簡介:Wall(我)Eye(爱)Kn

阅读：640|2022-11-06

6 汉语中的日文Buff，除了“欧巴桑”竟然还有

当我们初次接触日语时，会发现日语中有很多的汉语词，并因此产生一种亲切感。但是，其

阅读：513|2022-07-30

7 sevenjay/cpp-markdown: Cpp-Markdown is a

sevenjay/cpp-markdown: Cpp-Markdown is a freely-available Markdown text-to-HTML

阅读：567|2022-08-18

8 mathjax/MathJax-i18n: MathJax localizati

mathjax/MathJax-i18n: MathJax localization

阅读：378|2022-08-16

9 如何通过身份证号码看男女性别?

众所周知，我们的身份证号码里面包含的信息有很多，如出生日期、性别和识别码等，如果

阅读：239|2022-11-06

10 Jeroen-G/laravel-packager: A cli tool fo

Jeroen-G/laravel-packager: A cli tool for creating Laravel packages

阅读：754|2022-08-12

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

imgareaselect+php实现图片裁剪保存

请发表评论

全部评论

上一篇：

下一篇：

librespeed/speedtest: Self-hosted Speedt

avehtari/BDA_m_demos: Bayesian Data Anal

四维彩超怎么看性别？四维看男孩女孩诀窍

cavestri/themoviedb-javascript-library:

medfreeman/markdown-it-toc-and-anchor: m