Cropper.js头像裁剪功能实现
上传头像功能的头像裁剪，多项目都会遇到。用 Cropper.js 来搞定裁剪这一步，体验还不错，交互也挺流畅的。基本套路就是用户选完图，先展示预览，再让用户调整裁剪区域，把好的图传到后端。实现起来不复杂，前端靠 HTML 搭结构、CSS 美化下样式，逻辑部分用 JavaScript 搞定，三板斧组合拳。
头像上传的 <input type="file"> 用来选图片，CSS 可以控制下 #preview 的大小和溢出隐藏，方便搞个预览框。Cropper.js 上手快，直接传个 img 元素进去就能开始裁剪，还能设置 aspectRatio 限制裁剪比例，比如头像就一般用 1:1。
事件也简单，监听 change 拿到图片，用 FileReader 读成 Base64，插进页面里，初始化 new Cropper(img, options)。裁剪数据通过 crop 回调能拿到，后面用 fetch 或 XMLHttpRequest 发给服务器就行。想压缩还能自己加个 canvas 二次，灵活性挺高。
如果你做的是用户中心、社交类、后台管理这些场景，这种裁剪上传功能还是蛮实用的。想拓展的话，可以看看下面这几个例子：
如果你想少折腾，推荐先用 Cropper.js 的默认样式试试，够用就上，改样式再慢慢调，别一上来就重写，容易踩坑。
文件大小：206.93KB
评论区