需求：用户上传或者修改头像的时候先将图片裁剪，固定宽度和高度，这样在不同的情景下显示的时候不会出现压缩失真。
中间折腾过的方法:
1.smartCorp.js
国外一个大神写的，根据图像的饱和度裁剪最好看的照片，刚开始以为很好用的，在官网上下载了源码，demo跑起来还可以，但是裁剪成小图片的时候裁剪不了，项目是Java的，但是demo用的是PHP，我也不会PHP，也没有运行环境，最后放弃了。
2.ＪＳ素材网上下载的插件。也是一样的问题，裁剪成小图片的后台代码运行不了，而且样式也不好看，还是选择放弃。
3.JCorp.js 这也是国外的开源软件，第一眼看上去清新大方，有点意思。还有详尽的使用方法，不错不错。但是最核心的裁剪问题依然存在。有博客上用的是后台的Java代码裁剪，demo支持直接本地读取，和写入，没有问题，但是放在网页上，图片走服务器上传是很麻烦的一个问题，除了上传原图，还要返回裁剪后的图片base64码，这样子显示是没问题了 ，但是怎么上传到阿里云服务器又是问题了。找啊找，终于找到一个博客写的是用前端H5的<canvas>画布裁剪，不走服务器，很nice。于是乎直接放在项目里用了，集成好也没问题，很开心。开心了一分钟，然后，流文件怎么上传到阿里云服务器呢，翻遍了阿里云的社区和手册也没找到答案。然后简书上的一篇文章讲清楚了要怎么处理上传，搬过来，解决好了。最后还有一个问题，如何上传到网易云呢？翻了网易云的开发文档，用断点走了几遍js文件，找到了上传的文件格式，一遍一遍的试，最后也搞好了。超级超级开心的。以下是实现代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>图片上传
//点击头像框触发事件$("#portraitImage").click(function(){ var c=document.getElementById("myCan"); var cxt=c.getContext("2d"); cxt.clearRect(0,0,c.width,c.height); var porsrc = this.src; var orginimg = '![]()
'; //" crossorigin="Anonymous" //var image = new Image(); //image.setAttribute("crossOrigin",'Anonymous') //image.crossOrigin = "Anonymous"; //image.src = porsrc; $("#imgfield").html(orginimg); //把原有的头像图片添加到可编辑框里 $("#cropbox").attr("src",porsrc); //初始化插件方法 initJcrop(); layer.open({ type: 1, scrollbar: false, title: ['头像裁剪框', 'font-size:16px;'], area: ['800px', '500px'], btn: ['保存'], tipsMore: true, content: $("#showbg"), yes: function(index, layero){ subform(); $('#showbg').css('display','none'); layer.closeAll(); }, cancel: function(){ $('#showbg').css('display','none'); } }); }); 最后想了一个改进的地方，就是之前已经有头像的用户，可能会复用以前的头像，所以点击修改的时候要把原来的图片带到图片处理框里。这里遇到了图片的跨越请求问题。解决办法是在img标签添加一个属性：crossorigin="Anonymous"。
前后大概5天的时间做了这么一个小小的功能，收获了图像处理的知识，虽然理解上并没有很深，但是能运用起来，也蛮有成就感的了。记录下探索的历程。望更进一步。
JCrop官网地址：http://deepliquid.com/content/Jcrop_Download.html