前端裁剪图片,后台经常会用到这个功能,用户上传图片、头像时也会用到,
也可以加一层裁剪逻辑,确定用户上传的是符合规定的图片,
防止用户上传乱七八糟的尺寸 😒

vue-cropper

pc端、移动端均可用

github

ThorUI-uniapp

tui-image-cropper 组件
该 UI 库同时支持 h5 和 小程序端所以可以实现跨端

github

注意:
该组件在 1.5.1 版本测试时
该组件是根据 imageUrl watch 的监听来初始化的
所以组件创建时如果设置了正确的 imageUrl 则不会初始化,导致图片不显示(因为 watch 中没有设置 immediate)

解决方案:
一开始先设置 imageUrl: null
然后再设置正确的 imageUrl
触发初始化流程