Bootstrap Cropper图片裁剪插件
Bootstrap 的风格，加上 Cropper.js 的操作体验，组合出来的图片裁剪插件还挺顺手的。你只要在页面里放一张图片，用点代码初始化下，就能让用户自己拖着裁、缩、转，想怎么整就怎么整。头像上传、图片预览啥的都能搞定，尤其适合那种需要前端先裁图再上传的场景。
Cropper.js 的 API 还挺丰富，比如.cropper('rotate', 45)能直接把图片转个角度，.cropper('getCroppedCanvas')能直接拿到裁剪后的 Canvas。你要是再配合个上传接口，整个流程就都闭环了。
Bootstrap Cropper 的整合方式也蛮直观，前提是你引入了bootstrap.css、cropper.js和插件本身的bootstrap-cropper.js，剩下就都是熟悉的 jQuery 套路。用$(selector).cropper(options)初始化，再用控制按钮配合 API，一套流程下来用户体验还挺顺。
我试过用它做头像上传，效果还不错，裁剪响应快，界面也干净。你可以参考下压缩包里的readme.htm，里面有例子和基本的用法，基本上照着改下路径就能直接跑。要注意图片容器的大小别太小，不然裁剪区域不好操作。
如果你刚好在做用户中心、图像、甚至是移动端上传功能，可以考虑集成这个插件，能省下不少 UI 和交互设计的时间。
文件大小：1.49MB
评论区