vue-croppa: 一个高度可定制的 Vue 图片裁剪组件

[zhanziyang]

vue-croppa

正在用 vue 开发一个自己的网站，有裁剪上传图片的需求，找了很多现有的组件，或过于笨重或难以定制化，总之都不适合自己的网站，索性自己做了，做着做着发现这个组件很适合单独抽出来做，于是做成了一个很简单直观的可定制化组件放到了 github 上。我觉得前端之所以重复轮子这么多，就是因为大部分轮子很难定制化，适用场景很有限，所以开发高可定制化的轮子应该是一个正确的方向。

可以点击下面图片链接体验一下

这个组件只完成一件事：图片 ---> 裁剪 ---> 图片

主要特点：

1. 直观，所见即所得
2. 高可定制
3. 轻量：18kb （算轻量不？哈哈哈我也不知道）
4. 支持文件拖放 (drag and drop)
5. 支持移动端手势

如果你们的网站有同样的需求，欢迎使用这个组件哈，发现问题欢迎 issue，我会尽快答复。

需要注意的是，不同于传统的裁剪工具，这是一个“ 所见即所得 ”的裁剪工具，整个外框就是裁剪框，用户把图片放进去后通过缩放和移动来得到想要的部分。 这种交互方式如果没有指示一开始确实会有点让人摸不着头脑。。不过目前没有改变的打算，因为我觉得传统交互方式的裁剪工具不够直观，而且做了很多多余的事情，比如，用了三个框（最外的container, 图片边缘，裁剪框），其中有两个框是可以调整大小和移动的（图片和裁剪框）。

两种方式各有利弊吧，大家根据具体的需求选择就可以。

[leopku]

资瓷，已 star

[123s]

能不能自己定义切哪一个地方的图

[zhanziyang]

@123s 没懂你的意思，能否举个例子

[zhanziyang]

@123s 是指，不让用户移动图片，固定截取图片的某一区域，这样吗？

[mokeyjay]

先滋糍一个，已 Star
另外，一般切图都是有一个框框可以调整大小、比例这样的，比较符合普通用户对贴图的惯性思维。刚打开页面选了图片之后我还愣了几秒才明白，希望能够加上

[zhanziyang]

@mokeyjay 谢谢支持哈。

有计划加上外框大小和比例可调整的功能，之前没有考虑 resize 是因为之前定位是固定比例的图片裁剪，一般有裁剪需求的不也是因为需要统一比例吗？比如头像上传，多是为了把图片裁成正方形。

不过我觉得没必要加上那种虚线裁剪框，因为本身的定位就是所见即所得，外框即是裁剪框。而且你说的那种交互方式，已经有很多优秀的组件开源组件了，我就不重复造轮子啦，可以去看看 vue-cropper, vue-crop 这些。

[zhanziyang]

@123s 我知道你的意思了，可以“拖动移动图片”，“滚动缩放图片”，整个外框即为裁剪框。

这个交互方式没有明确指示好像确实不太明显哈哈哈。不过这个暂时不会改，我觉得有利有弊吧。

[123s]

@zhanziyang 我之前想做一个自动识别彩票的小工具，可以让用户切下彩票号码，这样我程序好识别。

[zhanziyang]

@123s Soga. 这个暂时还不支持，不过这个建议不错，已经加入 todo 列表了，谢谢~