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