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

分享一个开源项目,包含很多 canvas 实战应用(欢迎共建)

  •  
  •   lem123 · 3 天前 · 1550 次点击

    github 地址: img-generate

    大佬们如果喜欢这个项目,请帮忙在 GitHub 点个 star 吧,这样可以获取到项目的最新进展。

    图像处理(图片裁剪)

    功能描述:通过 canvas 的 ImageData , 实现了一个基础的图像处理工具。可以在浏览器对图片进行左右镜像、左右旋转、颜色滤镜、尺寸修改等操作。

    截屏 2023-05-21 14.38.09.png

    视频处理工具

    功能描述:用 ffmpeg + canvas 实现一个在线可视化音视频编辑工具

    截屏 2023-06-26 20.59.14.png

    拼接头像

    功能描述:组装头像 2.png

    节日气氛

    功能描述:就是在节日的时候,可以在头像上增加一些节日的装饰,增加节日气氛。

    4.png

    颜色获取

    功能描述:每次点击图片,背景色都会变成点击部分的颜色。截图:

    5.png

    17 条回复    2024-10-25 06:42:02 +08:00
    lem123
        1
    lem123  
    OP
       3 天前
    糟糕,证书过期了,先只能这样子了
    http://pinglin.love/cut
    zhaoahui
        2
    zhaoahui  
       3 天前
    .love 多少钱一年
    rossroma
        3
    rossroma  
       3 天前
    头像是自己手绘的吗?
    lem123
        4
    lem123  
    OP
       3 天前 via Android
    @rossroma 一个 wrb3 项目开源出来的,引用里有提到
    lem123
        5
    lem123  
    OP
       3 天前 via Android
    web3
    lxqxqxq
        6
    lxqxqxq  
       3 天前
    @lem123 #1 acme.sh 证书自由
    shui14
        7
    shui14  
       3 天前   ❤️ 1
    恕我直言,这种项目在今天没有什么意义,顶多私下玩玩。七八年前就有人移植过 jscv 之类的,当时还算有点亮点,别人都在吵那个模版框架好用,你能玩的花活。我刚才点进去看了一下,多年未更新,最近动态那哥们貌似也从阿里毕业了。
    现在的图形类工具竞争过于激烈,如果你想粘合 ffmpeg 和视频处理,不妨直接拿现成的各个库去整合,比如 ffmpeg 和 webcodecs 这些现成方案太多,关键词一搜就是几页。而且视频处理且不说 vfx ,在传统软件工程师做这一行的人眼里显得很粗糙。canvas 纯跑 cpu 没啥新鲜,这种 demo 项目 ai 都能出。特别去年初 webgpu 发布正式版后,冒出来一波 gpgpu 大佬,不够看了。整合流行的库的好处,跟上节奏,搞些针对性功能点,能用下去。拿专业的模块解决有需要的问题。
    今天纯 kpi 玩的项目已经走不通,那么多大佬都毕业了,不是能力的问题。你这两个方向跟前端一点关系都没有,属于传统软件工程师干的,只不过在用 js 写代码而已,没有什么优势,
    usual2970
        8
    usual2970  
       3 天前   ❤️ 1
    @lem123
    @lxqxqxq

    推荐试一下开源的证书管理工具:

    https://github.com/usual2970/certimate
    Ocyss
        9
    Ocyss  
       3 天前
    @lem123 #1 caddy 全自动证书生成, 也很好用
    minglanyu
        10
    minglanyu  
       3 天前
    lem123
        11
    lem123  
    OP
       3 天前 via Android
    @minglanyu 感谢支持,欢迎共建
    lem123
        12
    lem123  
    OP
       3 天前 via Android
    @lxqxqxq 我研究一下
    lem123
        13
    lem123  
    OP
       3 天前 via Android
    @shui14 首先非常感谢评论,我分享一下我的理解。
    如果我要做一个编辑器项目用于盈利(不管是图片编辑器或者视频编辑器),你说的这些问题都是存在的。我这个项目目前只是一个 demo 级别的项目,没啥竞争力。
    不过我分享的主要是源码和实现思路,目前也不靠项目盈利(虽然很想)
    lem123
        14
    lem123  
    OP
       3 天前 via Android
    @shui14 然后你提到的最后一段。
    首先一个前提,我这个项目中的视频剪辑,是用的 ffmpeg wasm ,这个技术算不上新,但是真实业务的应用场景还是挺多的。
    关于前端工程师的定位,我觉得不要自己给自己局限。尤其是有了 ai 以后,很多算法能力都直接从大模型就可以获取。前端是可以从以前的页面工程师,变成项目 owner 的。
    最后,我一直觉得难者不会,会者不难。不管多复杂的项目,都是从原理一点一点搭起来的,比如 casvas 在图片编辑的应用,我在项目实战有很多应用。比如 ai 绘画中,前端的局部重绘。mask 区域的构造,都是靠的 canvas 来处理图片的。
    rui6ye
        15
    rui6ye  
       1 天前
    页面如果支持 h5 就好了,尤其合称头像这个,我网站的 h5 用户比较多,可惜改不动,代码结构好复杂。
    rui6ye
        16
    rui6ye  
       1 天前
    轻轻吐槽一下:全部功能聚合在一起 就失去了开源的意义了 开源本身是方便大家去补充和完善,喜欢哪个用哪个,全部打包在一起,抽离就很困难了。比如:我很喜欢这个头像的功能,想直接接入。
    lem123
        17
    lem123  
    OP
       1 天前 via Android
    @rui6ye 我觉得你的建议很好,你希望怎么样去引入呢。
    按照文件夹,一个功能一个功能的隔离开?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1043 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:23 · PVG 07:23 · LAX 16:23 · JFK 19:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.