5 款最棒的 Vue 图片剪裁编辑器推荐

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月02日

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗

Vue 开发中经常会碰到图片上传前,需要剪裁的应用场景,比如用户上传头像、文章封面、商品封面、广告头图等需要图片剪裁编辑器等场景。本文推荐 5 款适合各种场景的 Vue 图片剪裁编辑器,可以在上传图片前,对图片进行剪裁、旋转、翻转、放大缩小等编辑操作。

1.vue-image-crop-upload - 支持 vue 3 ,PC端友好,图片剪裁直接上传

01-vue-component-image-crop-upload

Github:https://github.com/dai-siki/vue-image-crop-upload

  • 简单直接,界面友好
  • 拖动放大,一键剪裁
  • 保存即上传
  • 不支持移动端

2.vue-cropper - 支持 Vue 3,功能强大,支持移动端,微信小程序

02-vue-cropper

Github:https://github.com/xyxiao001/vue-cropper

vue-cropper 是国人开发的图片裁剪 Vue 插件,Github Star 3.3k 是国内使用最多的 Vue 图片裁剪之一。vue-cropper 代码简洁实用,更重要的是使用者众多,各种坑的解决方案也比较好找。

  • 图片按比例裁剪
  • 图片左右旋转
  • 支持移动端,微信小程序
  • 开发者社区友好

3.vue-slim-cropper - 移动端图片剪裁上传基础款,可同时上传多张图片

vue-slim-cropper

Github:https://github.com/komomoo/vue-slim-cropper

vue-slim-cropper 功能简单够用,可选择多张图片,每张图片单独剪裁,批量上传。

  • 移动端自适应
  • 可单独剪裁单张图片
  • 批量上传剪裁后的图片

4.Vue-advanced-cropper - 支持 vue3 ,适配移动端,高度可定制

vue-advanced-cropper

Github:https://github.com/Norserium/vue-advanced-cropper

Vue-advanced-cropper 是一个功能非常强大的图片剪裁器,全功能定制,能适应多种场景,可更改剪裁器的外观,所以也能更好的适配你的项目。

  • 全功能定制,适应你的项目
  • 开箱即用,支持多种形式剪裁
  • 完美适配移动端和PC端
  • 缩放、旋转、调整图片大小
  • 长宽比固定剪裁

5.avatar-crop-tool - 头像图片剪裁器,适配移动端

simple-avatar-crop-tool

Github:https://github.com/innocenzi/avatar

avatar 是一款主要解决头像图片剪裁的 Vue 图片剪裁组件。细节做的非常帮,左右旋转,水平垂直翻转,放大缩小,剪裁直接导出图片。

  • 主要解决头像图片剪裁的场景
  • 图片旋转,翻转,放大缩小
  • 图片剪裁后导出

总结

在 Vue 开发后台管理工具时,大到 admin 后台管理,小到图片剪裁编辑器,都需要我们一点点的测试,自己寻找最佳的解决方案。每一步都费时费力。那么有没有一种开箱即用,无需管任何前端问题,让开发者专注在开发需求上的工具呢?推荐一下卡拉云,帮你快速搭建企业内部工具。

卡拉云是一套快速搭建企业内部工具的开发平台,下面的 Demo 是使用卡拉云搭建的「SQL admin」管理工具,试试里的功能,你也可以用 10 分钟搭建一套属于你的后台管理工具,了解更多

卡拉云 SQL admin 后台管理系统

卡拉云是新一代低代码开发平台,与 Vue 这类框架相比,卡拉云无需配置开发环境,直接注册即可开始搭建。开发者无需处理任何前端问题,简单拖拽即可生成表格、表单、富文本等功能组件,一键接入数据库及 API,快速完成企业内部工具搭建,还可以分享给团队成员共享使用,数周的开发时间,缩短至 1 小时。

扩展阅读: