node.js（express）中使用Jcrop进行图片裁切上传

需求说明

简单来说就是要实现用户上传头像，并且要保存用户裁切后的部分作为用户头像。

第一步，选择图片：

第二步，在弹窗页面中展现并进行裁切：

第三步，点击“保存”，上传服务器。

实现过程

说来有点坎坷，相当于做了2遍，走了弯路。

第1遍是用户一选择图片，就进行了上传，然后返回一个地址，所以在弹层上展现的图片已经是服务器上的图片了，然后进行裁切，再保存。

第2遍找到的一个方法，是在第1遍做到裁切处理时候想到的，即弹层展现的是用户机器上选择的图片，不用先上传，但是用image/base64来展现的。这样就与服务器少了一次交互啊，并且服务器不用存储2遍图片，还提高了弹层展现速度，体验更好，所以是极好的。

说下碰到的主要技术点：

• express框架不用多说，就是保存的时候post一下裁切后的base64数据，后台写个对应路由就好。
• Jquery也不用多说，页面展现控制与ajax提交。
• HTML5/FileReader/canvas，FileReader用于将文件读取为数据,我们使用它的onLoad事件；canvas这个用作裁切移动时，实时重绘裁切后的图片（相当于实时预览，当然我是隐藏了，调试的时候可以让他display），可以隐藏，最后上传的其实就是这个canvas的base64数据。
• Jcrop plugin。这个是裁切插件，必须的了。下载与说明在这里。
• 其他就是base64字符串保存成图片了，这在服务端比较简单，直接用fs.writeFile(fileName,dataBuffer,function(err){});就好了。

具体代码

view页面，主要需要有一个上传控件，还有定义弹窗div以及用于重绘裁切范围图片的canvas，当然页面要引用相应的js插件和css等，主要：

<link rel="stylesheet" href="/css/jquery.Jcrop.css">
<script src="/js/jquery.js"></script>
&