V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tediorelee
V2EX  ›  前端开发

萌新请教一个图片操作的问题

  •  
  •   tediorelee · 2020-09-21 09:27:39 +08:00 via iPhone · 1302 次点击
    这是一个创建于 1525 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前写的基本都是管理系统啥的,框架用的 vue,现在有个需求是对图片的操作,大概有图片的旋转,放大缩小,还有就是在图片上进行文字标注(这个不知道该怎么实现)并支持保存本地

    有没有大佬了解这种相关功能实现的?

    8 条回复    2020-09-23 10:03:07 +08:00
    yaphets666
        1
    yaphets666  
       2020-09-21 09:35:04 +08:00
    旋转,放大缩小 这个好说 computed return 一个 css 样式对象 绑定到相关模板上就可以了 文字标注还能保存到本地 这个估计要 canvas
    wotemelon
        2
    wotemelon  
       2020-09-21 09:56:56 +08:00
    konva 直接干
    wotemelon
        3
    wotemelon  
       2020-09-21 09:58:17 +08:00
    给你参考下,N 年没更新了,https://github.com/wotermelon/vue-painting
    renmu123
        4
    renmu123  
       2020-09-21 17:22:19 +08:00 via Android
    提供一个思路,用 canvas 来进行处理,可以试一下 fabric 框架(我觉得文档写得不咋地),你要的旋转,放大,标注和导出(甚至还能压缩)都可以比较简单实现
    tediorelee
        5
    tediorelee  
    OP
       2020-09-21 21:01:42 +08:00 via iPhone
    @wotemelon 收到,感谢帮助
    tediorelee
        6
    tediorelee  
    OP
       2020-09-21 21:02:04 +08:00 via iPhone
    @renmu123 谢谢大佬,fabric 这就去看
    DL9412
        7
    DL9412  
       2020-09-23 09:51:39 +08:00
    直接搞一个 background 是图片,相对定位的 div,旋转放大缩小直接 css 搞定。

    纯文字标注的话,通过监控鼠标事件的坐标,在对应坐标位置画绝对定位的文本框,最后直接用 html2canvas 把整个 div 抓成图片

    在上家做过类似需求,不过是在图片上添加翻译文本图层,css 能画出来的什么方框圆形三角之类的也可以。
    如果需要不规则形状标记的话,那估计还是得 canvas 绘制了
    tediorelee
        8
    tediorelee  
    OP
       2020-09-23 10:03:07 +08:00 via iPhone
    @DL9412 很有帮助!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:52 · PVG 02:52 · LAX 10:52 · JFK 13:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.