ngImgCrop圆形头像裁剪插件
圆形头像裁剪的场景还蛮常见的，比如用户上传头像、编辑个人资料这些。ngImgCrop是我之前用过的一个AngularJS插件，功能挺直接，支持圆形和方形两种裁剪方式，响应也快，操作起来挺顺的。
安装方式比较灵活，你可以直接引入ng-img-crop.js和ng-img-crop.css，也可以通过npm install ng-img-crop搞定。如果项目走的是模块化，用 Webpack 或 Rollup 也没问题。
它的核心就是一个</>指令，你只需要绑定几个属性就行，比如<>>、<>>这些，设置成<>area-type="circle">，前端就能直接裁出圆形图片了，蛮适合做头像上传用的。
你还能通过配置参数，比如outputWidth、aspectRatio这些，来控制裁剪尺寸和比例。比较贴心的一点是，它还有on-change事件，可以拿到实时的裁剪状态，方便做一些实时预览。
实战中你可以先用<input type="file">加载图片，把图传给image模型。裁剪后保存到result-image变量里，再配合 canvas 上传服务器，整个流程挺顺畅。
要注意哦，它只支持 AngularJS 1.x，Angular 2+ 就用不了啦。如果项目还在老版本，这个插件蛮值得一用；如果你还没替换头像裁剪方案，可以先试试看。
对了，大图的话建议先压缩一下，减少内存消耗，不然浏览器会卡。
文件大小：283KB
评论区