首先感谢nodejs的发展，一堆好用的js库拥现出来。以前我们想实现一个在线编辑图片的功能，要么用Flash, 要么要花一个团队好几个月的时间去开发。而现在只要随便搜搜就是成熟度非常高的开源js包
比如拖放功能，思路一般是用html5的API，听着就感觉很难。interactjs就封装为draggable方法。
安装极为简单，npm或者引用cdn即可
它的所有方法是支持链式操作的，就是可以连续调用
上图的.drag-and-resize是CSS选择器，draggable和resizable则分别为拖放和改变大小的方法，可参照官方文档进行选项的设置。这个库不限于图片，任何Html元素和Canvas都可以支持。如果你在做内容管理系统CMS的话，强烈推荐。
有时候图片过大，我们想剪切一下。比如上传用户头像的时候，我们要允许用户裁切为指定的大小，这样在显示头像时就非常统一好看了。而这个用Cropperjs就足够了，它的在线演示如下图
功能非常完善了，蓝线框是可以任意拖动的，在选定区域后，点击Get Cropped Canvas, 就可以在弹出框里显示选择的部分。
它的安装也是支持npm和CDN的
调用也简单的令人发指
注意image是个html element, 不支持selector. 如果你还在用jQuery的话，可以用selector后用get()[0]来获取html element
然后做一个button调用copper.getCroppedCanvas() 得到图片二进制数据后上传服务器即可
8.png
网友评论