最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。
下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^
功能实现步奏：
一、获取文件，读取文件并生成url
二、根据容器的大小使用canvas绘制图片
三、使用canvas绘制遮罩层
四、使用canvas绘制裁剪后的图片
五、拖动裁剪框，重新裁剪图片
PS：因为是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留意this对象喔
第一步：获取文件，读取文件并生成url
在这里我是使用html5里面的file api处理本地文件上传的，因为这样可以不需要把图片上传到服务器，再由服务器返回图片地址来做预览，详细请看：使用File API 之FileReader实现文件上传
document.getElementById('post_file').onchange = function() { var fileList = this.files[0]; var oFReader = new FileReader(); oFReader.readAsDataURL(fileList); oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用. postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数 }; }
第二步：根据容器的大小使用canvas绘制图片
在上一步使用File API的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。
这里稍微要注意下canvas的drawImage方法。
paintImage: function(url) { var t = this; var createCanvas = t.getImage.getContext("2d"); var img = new Image(); img.src = url; img.onload = function(){ //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。) //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放 //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴 if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) { t.imgWidth = img.width; t.imgHeight = img.height; } else { var pWidth = img.width / (img.height / t.regional.offsetHeight); var pHeight = img.height / (img.width / t.regional.offsetWidth); t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth; t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight; } //图片的坐标 t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px'; t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px'; t.getImage.height = t.imgHeight; t.getImage.width = t.imgWidth; t.getImage.style.left = t.px; t.getImage.style.top = t.py; createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小 t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址 t.cutImage(); t.drag(); }; },
出来的效果是这样的：
第三步：使用canvas绘制遮罩层
在上一步中已经把需要裁剪的背景图绘制出来了，现在需要根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比。
（这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。不知道这一步能不能直接去掉？有知道的童鞋麻烦告诉下我。）
//绘制遮罩层： t.editBox.height = t.imgHeight; t.editBox.width = t.imgWidth; t.editBox.style.display = 'block'; t.editBox.style.left = t.px; t.editBox.style.top = t.py; var cover = t.editBox.getContext("2d"); cover.fillStyle = "rgba(0, 0, 0, 0.5)"; cover.fillRect (0,0, t.imgWidth, t.imgHeight); cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);