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

2024 年 10 月 22 日
 lem123

github 地址: img-generate

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

图像处理(图片裁剪)

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

视频处理工具

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

拼接头像

功能描述:组装头像

节日气氛

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

颜色获取

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

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

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

https://github.com/usual2970/certimate
Ocyss
2024 年 10 月 22 日
@lem123 #1 caddy 全自动证书生成, 也很好用
minglanyu
2024 年 10 月 22 日
lem123
2024 年 10 月 22 日
@minglanyu 感谢支持,欢迎共建
lem123
2024 年 10 月 22 日
@lxqxqxq 我研究一下
lem123
2024 年 10 月 22 日
@shui14 首先非常感谢评论,我分享一下我的理解。
如果我要做一个编辑器项目用于盈利(不管是图片编辑器或者视频编辑器),你说的这些问题都是存在的。我这个项目目前只是一个 demo 级别的项目,没啥竞争力。
不过我分享的主要是源码和实现思路,目前也不靠项目盈利(虽然很想)
lem123
2024 年 10 月 22 日
@shui14 然后你提到的最后一段。
首先一个前提,我这个项目中的视频剪辑,是用的 ffmpeg wasm ,这个技术算不上新,但是真实业务的应用场景还是挺多的。
关于前端工程师的定位,我觉得不要自己给自己局限。尤其是有了 ai 以后,很多算法能力都直接从大模型就可以获取。前端是可以从以前的页面工程师,变成项目 owner 的。
最后,我一直觉得难者不会,会者不难。不管多复杂的项目,都是从原理一点一点搭起来的,比如 casvas 在图片编辑的应用,我在项目实战有很多应用。比如 ai 绘画中,前端的局部重绘。mask 区域的构造,都是靠的 canvas 来处理图片的。
rui6ye
2024 年 10 月 24 日
页面如果支持 h5 就好了,尤其合称头像这个,我网站的 h5 用户比较多,可惜改不动,代码结构好复杂。
rui6ye
2024 年 10 月 24 日
轻轻吐槽一下:全部功能聚合在一起 就失去了开源的意义了 开源本身是方便大家去补充和完善,喜欢哪个用哪个,全部打包在一起,抽离就很困难了。比如:我很喜欢这个头像的功能,想直接接入。
lem123
2024 年 10 月 25 日
@rui6ye 我觉得你的建议很好,你希望怎么样去引入呢。
按照文件夹,一个功能一个功能的隔离开?
rui6ye
2024 年 10 月 26 日
@lem123 是的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/1082380

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX