正在用 vue 开发一个自己的网站，有裁剪上传图片的需求，找了很多现有的组件，或过于笨重或难以定制化，总之都不适合自己的网站，索性自己做了，做着做着发现这个组件很适合单独抽出来做，于是做成了一个很简单直观的可定制化组件放到了 github 上。我觉得前端之所以重复轮子这么多，就是因为大部分轮子很难定制化，适用场景很有限，所以开发高可定制化的轮子应该是一个正确的方向。
可以点击下面图片链接体验一下
这个组件只完成一件事：图片 ---> 裁剪 ---> 图片
如果你们的网站有同样的需求，欢迎使用这个组件哈，发现问题欢迎 issue，我会尽快答复。
需要注意的是，不同于传统的裁剪工具，这是一个“ 所见即所得 ”的裁剪工具，整个外框就是裁剪框，用户把图片放进去后通过缩放和移动来得到想要的部分。 这种交互方式如果没有指示一开始确实会有点让人摸不着头脑。。不过目前没有改变的打算，因为我觉得传统交互方式的裁剪工具不够直观，而且做了很多多余的事情，比如，用了三个框（最外的container, 图片边缘，裁剪框），其中有两个框是可以调整大小和移动的（图片和裁剪框）。
两种方式各有利弊吧，大家根据具体的需求选择就可以。
 |
1
leopku Jul 3, 2017  1
资瓷，已 star
|
 |
2
123s Jul 3, 2017 1
能不能自己定义切哪一个地方的图
|
 |
3
zhanziyang OP @123s 没懂你的意思，能否举个例子
|
|
4
zhanziyang OP @123s 是指，不让用户移动图片，固定截取图片的某一区域，这样吗？
|
 |
5
mokeyjay Jul 3, 2017 1
先滋糍一个，已 Star
另外，一般切图都是有一个框框可以调整大小、比例这样的，比较符合普通用户对贴图的惯性思维。刚打开页面选了图片之后我还愣了几秒才明白，希望能够加上 |
|
6
zhanziyang OP @mokeyjay 谢谢支持哈。
有计划加上外框大小和比例可调整的功能，之前没有考虑 resize 是因为之前定位是固定比例的图片裁剪，一般有裁剪需求的不也是因为需要统一比例吗？比如头像上传，多是为了把图片裁成正方形。 不过我觉得没必要加上那种虚线裁剪框，因为本身的定位就是所见即所得，外框即是裁剪框。而且你说的那种交互方式，已经有很多优秀的组件开源组件了，我就不重复造轮子啦，可以去看看 vue-cropper, vue-crop 这些。 |
|
7
zhanziyang OP |
|
8
123s Jul 3, 2017
@zhanziyang 我之前想做一个自动识别彩票的小工具，可以让用户切下彩票号码，这样我程序好识别。
|
|
9
zhanziyang OP @123s Soga. 这个暂时还不支持，不过这个建议不错，已经加入 todo 列表了，谢谢~
|
Select Language