imgareaselect+php实现图片裁剪保存

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 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

krishnaik06/Machine-Learning-in-90-days

微信小程序在components的properties属性

2022-07-18

armancodv/building-energy-model-matlab:

2022-08-17

美元符号为什么是“$”

2022-11-06

CVE-2022-2280

2022-07-08

FGRibreau/import-tweets-to-mastodon: How

2022-08-17

阅读排行榜

1 CVE-2022-22681

Session fixation vulnerability in access control management in Synology Photo St

阅读：945|2022-07-08

2 bluegill/katana:

bluegill/katana:

阅读：911|2022-08-18

3 NelsonUpenn/PMLS-MATLAB-Guide: MLguide1-

NelsonUpenn/PMLS-MATLAB-Guide: MLguide1-0.pdf: Nelson Dodson's Student'

阅读：324|2022-08-17

4 青岛中学艺术设计课程帮助学生树立全新思维

这几年，学校不仅关注学生的文化课知识，对于学生的艺术培养，也是非常重视的。毕竟，

阅读：351|2022-11-06

5 juleswhite/mobilecloud-15: Programming C

juleswhite/mobilecloud-15: Programming Cloud Services for Android Handheld Syste

阅读：461|2022-08-30

6 yosupo06/library-checker-problems: The p

yosupo06/library-checker-problems: The problem data (Test case generator, judge

阅读：531|2022-08-15

7 athos/Bigmouth: Clojure framework to bui

athos/Bigmouth: Clojure framework to build delivery-only Mastodon-compatible web

阅读：869|2022-08-17

8 开洗车店怎么样？20元洗一辆车有利润吗

现在汽车行业生意红火，当然，汽车的相关投资项目，市场前景都是很不错的，那么，开洗

阅读：231|2022-11-06

9 CVE-2022-36686

Ingredients Stock Management System v1.0 was discovered to contain a SQL injecti

阅读：506|2022-09-18

10 微信小程序|没有授权合法域名时如何操作

在使用微信小程序开发者工具进行开发需要使用数据库内的内容而发送网络请求却没有配置

阅读：820|2022-07-18

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

在线QQ客服

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

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

imgareaselect+php实现图片裁剪保存

请发表评论

全部评论

上一篇：

下一篇：

dphi-official/Machine_Learning_Bootcamp

juven/maven-bash-completion: Maven Bash

win7系统注册表编辑器打开的操作方法

route101/mastoinker: Quick image view as

openshift/library-go: Helpers for going

krishnaik06/Machine-Learning-in-90-days

微信小程序在components的properties属性

armancodv/building-energy-model-matlab:

美元符号为什么是“$”

CVE-2022-2280

FGRibreau/import-tweets-to-mastodon: How

关于我们

产品与服务

解决方案

139-2527-9053

客服电话

电子邮件

imgareaselect+php实现图片裁剪保存

请发表评论

全部评论

上一篇：

下一篇：

dphi-official/Machine_Learning_Bootcamp

juven/maven-bash-completion: Maven Bash

win7系统注册表编辑器打开的操作方法

route101/mastoinker: Quick image view as

openshift/library-go: Helpers for going

krishnaik06/Machine-Learning-in-90-days

微信小程序 在components的properties属性

armancodv/building-energy-model-matlab:

美元符号为什么是“$”

CVE-2022-2280

FGRibreau/import-tweets-to-mastodon: How

关于我们

产品与服务

解决方案

139-2527-9053

微信小程序在components的properties属性