jQuery照片图像剪裁插件Jcrop中文翻译详解

javascript cooljun 316℃ 0评论

本文地址:http://www.zhangxinxu.com/wordpress/?p=359

原项目首页:http://deepliquid.com/content/Jcrop.html
原项目demo:http://deepliquid.com/projects/Jcrop/demos.php

可以看做废话的部分
一般来讲,图片的剪裁功能多用在生成缩略图以及生成头像。还在两三年前吧,剪裁这一功能还是较陌生的,例如人人网(原校内外)有些老用户的头像的尺寸可以说明这一点,那个时候剪裁技术少,未兴起,网站的头像是限定高度或宽度的,而没有像近几年这样限定高宽比例以及尺寸的,所以一些老用户的老头像的就是扁的。

使用限定大小的剪裁技术好处在于开发维护方便了,因为头像的尺寸统一了,我们做前端的有些事情就好办了。比如说,要给照片添加圆角投影效果,一旦照片尺寸固定,直接根据大小量身做一张圆角投影的背景图就可以了。例如下面开心网头像的圆角投影效果。
开心网首页圆角投影头像截图

如果照片各个比例的都有,那么这个高宽固定的背景图片就显得捉襟见肘,碍手碍脚的。要想在各个比例图片下显示良好,则需要自适应技术,那需要的技术成本就高了。本文主要讲jQuery插件的,所以对于如何使用css实现自适应图片大小的圆角投影效果这里就不做说明了。

回到正题,要实现图片的剪裁,方法多种多样,例如目前人人网就是通过在一个大小限死的div格子内移动一个头像缩略图实现的,这样的好处是代码简单了很多,实现也容易了;开心网则通过移动大图与控制大图的显示比例实现头像剪裁的,好处在于易上手;而最近挺火的新浪微博的头像生成就是采用改变选区大小+终图预览方式实现,而本文要讲解的这款图片剪裁的jQuery插件Jcrop的效果表现就与新浪微博的一致,当然,从UI上来讲,要比新浪微博的舒服多了。(下图为新浪微博头像剪裁截图,请原谅我拿鄙人的陋照做演示)
新浪微博头像剪裁界面截图

其实,图片剪裁jQuery插件不少,但其中实现原理有差异,从HTML显示上讲,本文所演示的这个Jcrop插件是比较简单易懂的,其余一类插件的黑色半透明外围背景是通过上下左右四个div组装成了,其实无需如此麻烦,只需要上下两层图片,通过控制上层表现图片的大小和位移即可,而这款Jcrop插件就是如此实现的,如果您有兴趣,可以研究下实现原理的。也正由于这个原理,所以这款插件才有另外一个很有趣也实现的扩展功能——改变外围图片——其实就是将底层图片替换。

本文最关键的部分
已经制作了非常详细的Demo演示与讲解页面,所以对于演示或讲解的重点不在本文,而在Demo上,本文可以说是一个leader,引导者,指引如何在最短的时间内消化与上手这款优秀的插件。

1、Demo页面共有7个页面,一个首页,起导航作用,链接至5个静态演示页面,以及一个php动态演示页面。每个具体的Demo页面都有一个回到首页的链接,方便跳转。
2、5个静态页面的复杂度,使用难易程度逐渐提升,方便循序渐进的掌握此插件,从最简单的类似”Hello,word!”程度的用法,到一些基本事件处理程度,再到初级、高级API的使用。源文件中JavaScript代码部分有比较详尽的中文注释,对照效果,相信很快就会上手的。
3、php动态页面演示了如何生成终缩略图,但是没有演示存储到数据库,一是必要性,而是安全。在此页面上,只要在大图上划定一个选区,单击“确认剪裁”按钮,就可以看到效果了。

您可以狠狠地单击这里:中文Demo实例页面 | 中文版源文件下载(有删改 .zip 149K)

额外补充的部分
关于此插件其他一些细节就不在这里叙述了,很多,不过Demo已经比较详尽的展示了这款插件,这里说多了,反而显得啰嗦。我已经提到过,图片剪裁的插件不止本文的Jcrop这一款,如果您觉得Jcrop不合您的胃口,您也可以试试下面两种图片照片剪裁插件:
1、Image Upload and Auto Crop
您可以单击这里: 项目主页 | Demo演示 | 打包下载(V1.2)
2、imgAreaSelect
您可以单击这里: 项目主页 | Demo演示 | 打包下载(v0.7)

最后的废话
我提供的源文件与原项目提供的源文件在形式上还是有不少差异的,不是单纯的英文换成中文,界面有改动,HTML代码,翻译,注释,JavaScript代码等都有改动。为了是更加方便的理解,生搬硬套是不可取的,本地化很重要。
然而,我初生小犊,才疏学浅,且时间仓促,所以在源文件中或demo上难免会出现书写,翻译甚至一些语句的错误,欢迎指正,也希望多多包涵。
Jcrop是款很不错的照片剪裁插件,希望我做的些工作能够对您的学习或是工作有所帮助。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=359

转载请注明:cooljun小站 » jQuery照片图像剪裁插件Jcrop中文翻译详解

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址