V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhanziyang
V2EX  ›  分享创造

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

  •  
  •   zhanziyang · 2017-07-03 12:40:33 +08:00 · 5073 次点击
    这是一个创建于 2700 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-croppa

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

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

    try it out

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

    主要特点:

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

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

    第 1 条附言  ·  2017-07-03 16:01:29 +08:00

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

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

    9 条回复    2017-07-03 19:26:23 +08:00
    leopku
        1
    leopku  
       2017-07-03 12:49:36 +08:00   ❤️ 1
    资瓷,已 star
    123s
        2
    123s  
       2017-07-03 13:51:11 +08:00   ❤️ 1
    能不能自己定义切哪一个地方的图
    zhanziyang
        3
    zhanziyang  
    OP
       2017-07-03 14:25:30 +08:00
    @123s 没懂你的意思,能否举个例子
    zhanziyang
        4
    zhanziyang  
    OP
       2017-07-03 14:31:24 +08:00
    @123s 是指,不让用户移动图片,固定截取图片的某一区域,这样吗?
    mokeyjay
        5
    mokeyjay  
       2017-07-03 14:59:01 +08:00   ❤️ 1
    先滋糍一个,已 Star
    另外,一般切图都是有一个框框可以调整大小、比例这样的,比较符合普通用户对贴图的惯性思维。刚打开页面选了图片之后我还愣了几秒才明白,希望能够加上
    zhanziyang
        6
    zhanziyang  
    OP
       2017-07-03 15:30:35 +08:00
    @mokeyjay 谢谢支持哈。

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

    不过我觉得没必要加上那种虚线裁剪框,因为本身的定位就是所见即所得,外框即是裁剪框。而且你说的那种交互方式,已经有很多优秀的组件开源组件了,我就不重复造轮子啦,可以去看看 vue-cropper, vue-crop 这些。
    zhanziyang
        7
    zhanziyang  
    OP
       2017-07-03 15:41:42 +08:00
    @123s 我知道你的意思了,可以“拖动移动图片”,“滚动缩放图片”,整个外框即为裁剪框。

    这个交互方式没有明确指示好像确实不太明显哈哈哈。不过这个暂时不会改,我觉得有利有弊吧。
    123s
        8
    123s  
       2017-07-03 16:14:29 +08:00
    @zhanziyang 我之前想做一个自动识别彩票的小工具,可以让用户切下彩票号码,这样我程序好识别。
    zhanziyang
        9
    zhanziyang  
    OP
       2017-07-03 19:26:23 +08:00
    @123s Soga. 这个暂时还不支持,不过这个建议不错,已经加入 todo 列表了,谢谢~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2642 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:17 · PVG 19:17 · LAX 03:17 · JFK 06:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.