基于 jQuery Jcrop 插件的功能模块：头像剪裁

/**
   Jcrop version: 0.9.12
　 jQuery version: 1.9.0
   Author: 小dee
   Date: 2014.10.30
*/

先看看他山之石：博客园的头像模块也是使用的 Jcrop 插件，处理方式如图

博客园图1：

高度大于宽度时

博客园图2：

再看看新浪微博( http://account.weibo.com/set/photo )，它使用的是 flash，如图：

最后看豆瓣( http://www.douban.com/accounts/user_icon/ )，它使用的是 imgAreaSelect 插件：

豆瓣图1：

豆瓣图2：

我觉得新浪微博的处理方式更利于布局，也就是说不论上传多大尺寸的图片，都会把图片放在一个宽高固定的外围框中，页面的布局是固定不变的，不太会由于用户上传意想不到尺寸的图片( 其实... 这种几率比较小吧) 而影响布局的效果。

===================华丽的分割线=====================

本模块基于 jQuery 的插件 Jcrop，部分功能是直接使用 API 实现，部分功能使用 jQuery 实现，处理的方式类似新浪微博。

效果图：

流程图：

 坐标信息图：

功能一. 原图不论尺寸多大，都居中显示在固定尺寸的外围框中，如图：

①原图宽高相等时，把原图的宽高设置为何外围框相同尺寸：

②原图宽 > 高 时，原图在外围框中垂直居中显示：

③原图宽 < 高 时，原图在外围框中水平居中显示：

功能二. 初始时加载居中的默认选区，同时预览图与选区的位置相对应

功能三. 显示/隐藏 选区的左上、右下坐标值以及宽度和高度

功能四. 保存头像，保存剪裁后的图片至服务器

功能五.重新选取选区

功能六.移动和缩放选区

使用到的参数和 API 接口：

参数 -

aspectRatio

0

选框宽高比。说明：width/height

boxWidth	0	画布宽度
boxHeight	0	画布高度

boundary

2

边界。说明：可以从边界开始拖动鼠标选择裁剪区域

onChange	function(){}	选框改变时的事件
onSelect	function(){}	选框选定时的事件
onDblClick	function(){}	在选框内双击时的事件
onRelease	function(){}	取消选框时的事件

 

接口 - 

release()

取消选框

setSelect(array)

创建选框，参数格式为：[x, y, x2, y2]

 

代码：

一. 原始图片缩放居中

设置原始图片缩放并在外围框中居中：

//原图加载完之后调用
    function picsize(){ 

        //在原图外围框中，如果原图宽高比为1，则缩放至和外围框一样的尺寸
        if( $("#simg").width() == $("#simg").height() ){

            $("#simg").width($("#piccon").width());
            $("#simg").height($("#piccon").height());

        }else if( $("#simg").width() > $("#simg").height() ){ //当原图宽 > 高
        
            $("#simg").width($("#piccon").width());

            //jquery.Jcrop.js line:1654 baseClass: 'jcrop',
            //line:332
            $(".jcrop-holder").css({
                "position":"absolute",
                    "top":"50%",
                    "left":0,
                    "margin-top":-($("#simg").height()/2)
            });

        }else{ //当原图宽 < 高
        
            $("#simg").height($("#piccon").height());

            $(".jcrop-holder").css({
                "position":"absolute",
                    "top":0,
                    "left":"50%",
                    "margin-left":-($("#simg").width()/2)
            });
        }
    }

说明：在设置原图居中时，js 给原图设置 css 时，不能按照 HTML 中原图的 ID 来设置，原图在 HTML 中的代码为：

<div id="piccon">
        <!-- 原图 -->
        <img src="demo_files/pic3.jpg" id="simg" onload="picsize()" />
</div>

本来这里原图 img 的 id 为"simg"，但是在 jquery.Jcrop.js 文件的 line：314 中有如下的设置:

var $img = $origimg.clone().removeAttr('id').css(img_css).show();
$img.width($origimg.width());
$img.height($origimg.height());
$origimg.after($img).hide();

...

 var boundx = $img.width(),
 boundy = $img.height(),
        
        
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
    position: 'relative',
    backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);

line：1644 有如下设置：

$.Jcrop.defaults = {
  ...
  // Styling Options
    baseClass: 'jcrop',
  ...

所以在设置原图 css 的时候 不能使用原来的 id ，要使用 addClass 的 .jcrop-holder .

二. 选区居中：

    function wonload(){

        //设置初始选框的宽高，可根据外围框的大小来设置，此案例外围框宽高设置为300，初始选区宽高可以设置为150
        $areawh = 150;

        //获取图片的原始尺寸
        var screenImage = $("#simg");

        var theImage = new Image();
        theImage.src = screenImage.attr("src");

        var imageWidth = theImage.width;
        var imageHeight = theImage.height;
        
        //设置初始选框左上坐标
        if( $("#simg").width() == $("#simg").height() ){

            areaX = ($("#piccon").width() - $areawh)/2;
            areaY = ($("#piccon").height() - $areawh)/2;

            area2X = ($("#piccon").width() - $areawh)/2 + $areawh;
            area2Y = ($("#piccon").height() - $areawh)/2 + $areawh;

            //进行缩放后要把图片原始尺寸的缩放值传递给PHP
            $scalls = imageWidth / $("#simg").width();
            $("#scalls").val($scalls);

        }else if( $("#simg").width() > $("#simg").height() ){ //当原图宽 > 高
        
            //如果外围框中原图高(经过缩放)小于150，就给一个更小的选区高
            $areawh > $("#simg").height()?$areawh = 100:$areawh;

            
            areaX = ($("#piccon").width() - $areawh)/2;
            areaY = ($("#simg").height() - $areawh)/2;

            area2X = ($("#piccon").width() - $areawh)/2 + $areawh;
            area2Y = ($("#simg").height() - $areawh)/2 + $areawh;

            $scalls = theImage.height / $("#simg").height();
            $("#scalls").val($scalls);

        }else{ //当原图宽 < 高
        
            $areawh > $("#simg").width()?$areawh = 100:$areawh;
            
            areaX = ($("#simg").width() - $areawh)/2;
            areaY = ($("#piccon").height() - $areawh)/2;

            area2X = ($("#simg").width() - $areawh)/2 + $areawh;
            area2Y = ($("#piccon").height() - $areawh)/2 + $areawh;

            $scalls =  imageWidth / $("#simg").width();
            $("#scalls").val($scalls);
        }
        

三. 把原始图片的原始尺寸和经过缩放后的尺寸相除，得出缩放比，放入表单的隐藏域传给 PHP 文件：

<!-- 缩放比传递给PHP -->
<input type="hidden" id="scalls" name="scalls"/>

在 PHP 文件中接受参数并截图：

//缩放值
$scalls = $_POST['scalls'];

$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); //建立黑色背景的预览窗口

imagecopyresampled($dst_r,$img_r,0,0,$scalls*$_POST['x1'],$scalls*$_POST['y1'],$targ_w,$targ_h,$scalls*$_POST['w'],$scalls*$_POST['h']); //重采样拷贝部分图像并调整大小

代码下载地址：https://github.com/dee0912/imgCrop_Jcrop

作者：小dee

出处：http://www.cnblogs.com/dee0912/

说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！