这两天看纪晓岚第四部，结局42集中有这么一句话：“万岁爷 就因为有了贪官 不贪的就受表彰”。

上下文是这样的：

和珅因为“青化山事件”，被革职查办，后因为朝廷整治漕运，文武百官甚至乾隆帝都无法筹备整治漕运的银两，于是大家就让和珅待罪立功筹备银两，和珅于是从查办他时不帮他说话的人入手，贪官必然就不说了，纪晓岚家也被和珅搜了，结果没发现任何脏银，是个清官，于是全紫禁城和乾隆帝都知道纪晓岚是个清官，当乾隆帝因此事表彰纪晓岚时，纪晓岚如上说。

本周关注比较多的是JQuery部分，优化了一个分页组件，实现了一个仿Gmail头像上传并剪辑的功能。

分页组件稍后有时间可以分享一下，今天分享下仿Gmail头像上传剪辑的功能。

本周主题：仿Gmail头像上传剪辑

这个功能是参考了Gmail的头像上传功能，并参照其流程实现的，因此叫仿Gmail头像上传剪辑，建议想用类似功能的朋友先看看Gmail的头像上传流程。

使用到的工具：

1、JQuery

2、Jquery.Form.JS (JQuery的一个form插件)，这里主要是在层里面用到它的ajaxSubmit功能。

3、JCrop（JQuery头像剪辑插件），之前有篇博文讲到。

场景，思路和做法：

1、比如更新用户信息时，要更新用户的头像，这里只是更新头像地址，而不是在更新用户信息页面时上传头像，头像上传和剪辑的处理交给其他组件完成，比如这个上传剪辑功能。

2、给一个链接，比如叫“上传照片”， 如下图：

点击该链接会弹出一个层， 如下图：

3、头像上传的事情在这个层内完成，先上传到系统的temp目录，因为这个图片最后是要删除的，JCrop 剪辑后的图片才是真正想要的。

4、将图片上传完后，进行同比例的显示缩放(注意我这里叫显示缩放，而不是真正的缩放，即仅在该层内等比例显示下即可，当然你也可以不显示缩放，结果是图片巨大个，显示不下或者出现滚动条)，显示在该页面，然后加载JCrop插件，进行图片剪辑处理（这里为了简单，没有放像Gmail那样的预览小图，需要的朋友可以参照JCrop加上），如下图：

5、点击“应用更改”时，将在服务器上进行原图片的剪辑工作，JCrop需要的是剪辑框的x,y,w,h四个参数，但是剪辑是在原图片上进行的，因此此处的x,y,w,h需要做映射，将缩略后的x,y,w,h映射到原图片的x,y,w,h上，新图片剪辑后保存到你的头像目录，最后别忘记删除temp文件夹下的图片。如下图效果：

总结：

此功能的实现上没有什么新颖的东西，主要是将几个插件的使用揉合在一块，然后形成一个用起来比较顺手的功能，实现过程可能稍感麻烦，但是最终的效果还是不错！

活动地点一：

【游泳时间】
集合时间：14：30–15：00，15：00进馆。请务必准时！
起水时间：随时~~

【游泳地点】
人民大学游泳馆大厅集合

公交路线：
人民大学东门附近的公交车有：302\304\386\320\332\307\355\365\630\717\941\814\718\731\811\716\801\804\725\732\944\808\851\特4\特6\209
人大西门附近的公交有：361，944，944支，运通108，运通110，运通118，986，26等

门票价格：15 or 18元/次，
水温：26–28度

活动地点二：

【游泳时间】
集合时间：14:10–14：30，14:30进馆。请务必准时！
起水时间：有劲就多游,地坛不限制时间.

【游泳地点】
地坛游泳馆大厅集合

1. 地坛游泳馆位于东城区安外大街116号（地坛体育馆内）—–地坛公园北侧
2. 从地坛公园西门的北侧小胡同往东走大概30米，就能看到地坛体育馆的南门。我们在这里集合。
3. 地坛体育馆附近的公交车有：104 108 113 119 124 18 201 328 358 407 426 430 643 644 758 803 850 858 特2 乘地铁在安定门下车出B口后往北走大概500米既可看到一个天桥，路东就是地坛公园西门了。
下面链接为地图。
http://ditu.google.cn/maps?f=q&hl=zh-CN&geocode=&q=%E5%9C%B0%E5%9D%9B%E4%BD%93%E8%82%B2%E9%A6%86&sll=39.951629

门票价格：12元/次，10元衣柜押金（可退）
水温：26–28度

最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

这周来一直在赶一个Web项目，没多少时间focus到其他上面，于是这周的主题就干脆做个整理，整理下web项目开发时遇到的一些问题和解决办法。

本周主题：Web 项目开发中的常见问题

一、中文乱码

建议统一使用UTF8，或者全局做个filter处理。

二、表单校验

使用第三方校验框架， 而非自己去写，可以减少很多工作量。

三、Ajax的使用

首页尽量少用ajax，页面初次加载时常会加载不上来，尤其多个Ajax实例同时运行。

四、UI 规范

UI最好是出Demo，跟客户确认，定终稿，然后开发按最终效果图实现页面最好，否则没有页面或者效果图，即使有统一的规范，还是会浪费很多时间去调UI问题。

五、浏览器的兼容问题

虽然IE6基本上淘汰了，可老机器上使用IE6的还是不少的，Css 在处理兼容问题时，建议分开处理，在页面进行浏览器version判断，读取不同的css，这样管理和调整起来都方便。

六、比较完整的测试数据

页面框架搭完了，看着效果不错，可是填完数据后会发现和想象的不太一样。

七、用JPA Or JDBC 与数据库交互

JPA与JDBC相比之下，使用JPA大大减少了编程人员的工作量，因此还是偏向使用JPA，特殊环境下再选择JDBC

阿凡达自从1月4日开始在国内上映以来，偶和朋友们也是很期盼去看看，当然为了看上效果好的阿凡达，IMAX 3D是首选了。

北京IMAX 3D就三个地方，中国电影博物馆，双安华星，石景山万达

中国电影博物馆的价格最好，路程还可以，性价比最好，石景山万达的就远了，不说了，双安最近，可惜价格太高，还有票基本上很难买的。

看来中国电影博物馆的相对比较好，还有一原因是四场中，下午的只能当天买，上午场的可以提前一天买，不过看了豆瓣上的豆友们的回复，彻底放弃了。

摘出来一些：

1、早上四点五十分起床的，从四惠东赶过去，六点半到达影博。

2、早上7点20左右眼看着快到博物馆，心想这么早怎么也能排前头了吧，结果到了门口，当时我就万念俱灰了脑子里嗖嗖嗖过电影似的掠过各种死亡画面！起码500人的大长队啊啊啊啊啊，好害怕……

3、去他妈的，老子大年初一去看

4、跟排在特前头的一个哥们聊天来着，人家5点就到了，他说排在最前头的夜里2点来的，亲娘啊！！！

想去买票的可以先看看：http://www.douban.com/event/11386904/

偶这几天是彻底放弃了，这片子下架估计春节后了，不急不急！

由于项目需要，需要进行图像剪裁，网上找到这个JQuery的插件，蛮好用的，记录一下。

强烈建议使用前，先去官网看看Demo：http://deepliquid.com/projects/Jcrop/demos.php

实现的流程大体如下：

1. 通过JCrop获取剪辑框的位置x, y 和 剪辑框的大小 w , h。
2. 将图片和剪辑框的四个参数传到服务器端，由服务器完成图片的剪辑工作。
3. 保存剪辑好的图片。

具体使用方法，看官网的手册，简单易懂：http://deepliquid.com/content/Jcrop_Manual.html

时间：1月9日 周六 下午14:15

地点：地坛游泳馆 （三条深水道，三条浅水道，水温28左右，肯定不冷）

费用：12元/人次

联系：一 三 五 8 1 8 5 4 6 7 4

早上起来朋友短信说，雪太大，今天的出行计划取消，赶紧掀起窗帘看看，额滴神啊，真大！