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

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

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

博客园图1:

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

高度大于宽度时

博客园图2:

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

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

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

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

豆瓣图1:

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

豆瓣图2:

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

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

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

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

效果图:

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

流程图:

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

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

坐标信息图:

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

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

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

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

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

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

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

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

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

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

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

功能五.重新选取选区

功能六.移动和缩放选区

使用到的参数和 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
说明:作者写博目的是记录开发过程,积累经验,便于以后工作参考。
如需转载,请在文章页面保留此说明并且给出原文链接。谢谢!
上一篇:Linux内核编程规范与代码风格


下一篇:GitHub Top 100的Android开源库