5 款值得推荐的开源图片编辑器「建议收藏」
本文首发于公众号：品味前端，作者：茶无味，转载请注明出处。
前言在数字时代，图片编辑器变得尤为重要，因为良好的海报图片可以比普通文字更吸引用户眼球，有助于增强吸引力或达到更好的宣传效应。
越来越多的在线设计网站相继出现，也发展了数十年，为设计师和普通团队提供了一种新的创作方式。使用在线设计网站时，⽤户通过简单的拖、拉、拽等操作，就可以轻松制作出精美的⼿机海报、文章长图、电商产品图、新媒体素材、视频/公众号封面、营销及⾏政物料等各类平⾯设计与创意效果。可以更方便地解锁创意，促进团队合作，优化未来的设计道路。
在这篇文章中，我搜罗了 Github 上的相关的项目，向各位推荐 5 个我觉得非常不错的开源图片编辑器，每款都有各自特点并且都是近期仍在更新迭代的，希望对你有所帮助。
以下出场顺序不排先后。
yft-design一个基于 fabric.js 的在线图片编辑器，使用 Vue3 + TypeScript + Fabric.js + Element-Plus 的技术栈，该项目看起来比较注重设计文件的解析方面，作者是采用了 Python 库 psd-tools 在后端进行解析，支持 PS ...
从零开发基于 Stable diffusion 的在线 AI 绘图工具，定制专属龙年新春海报
前言哈喽大家好，这里是茶无味的一天。2023 年过得真快，转眼就要过年了，在这里祝大家龙年大吉，事事顺心！已经有段时间没更文了，刚好看到掘金的春节投稿活动，结合最近“不务正业”鼓捣的一些东西，就来给大伙整个活吧。
这两年 AIGC（AI-Generated Content）即 AI 内容生成技术的产品迎来井喷式增长，我想大部分人都已切身体验过许多相关产品了，我也不例外。但是作为程序员，我也一直在想：是否能基于这些 AI 技术开发自己的产品呢？今天就来聊聊这个我自己开发的免费在线 AIGC 工具，迅排 AI 文生图：
大家可以点此链接前往体验，【迅排设计 - Poster Design】是我独立开发的开源项目，致力于做最酷的开源在线海报图片编辑器，也欢迎给项目点个 Star 加速更新~
在这篇文章中，我将分享这款 AIGC 工具的开发历程，您将看到我是如何一步步设计实现它的。我的文章偏向注重实战，本文不会深入 AI 背后的复杂原理，涉及理论知识会尽量用大白话讲解，也希望能给你带来帮助或启发，如果觉得有用的话别忘了点赞收藏转发+关注。
在正式开始前，我们还是先聊聊 Stable di ...
挑战一键自动1比1复刻 B 站首页动态 Banner【番外篇】
嗨害嗨！这里是又在不务正业的前端菜鸡茶无味de一天。关注我的朋友可能看到这个标题已经审美疲劳啦，好吧，我也是真没想到 复刻 B 站首页 Banner 这个内容我能写三篇文章……为什么会有这个番外篇呢，原因是上次我把复刻 Banner 加上了自动化并发布到 Github 上（详情查看：三分钟复刻 B 站首页动态 Banner），然后最近 B 站的 Banner 又更新啦，由于复刻最新效果已无需再写任何前端代码，于是我想让一位 Java 后端选手来试试，最终他调试半天自信提交一个 PR，结果却实在是差强人意。
其实这次 B 站更新的效果并不复杂，但由于需要调试的图层数量也不少，且重叠度较高，不得不承认一个事实是：手动调试大约的确是真的很考验眼力！
我也实在不是闲的，是真的忍不住啊！又抽时间给这个项目加了一个功能，通过 puppeteer 模拟鼠标滑动来自动计算每个图层的速度变化率，从而实现精确复刻！例如下图鼠标滑动一段相同距离后的对比图，可以看到所有细节都是 1:1 完美对应：
ps. 以上配图使用 迅排设计 在线制作生成，这是我独立开发的一个功能强大的在线海报图片设计器，目前还在持 ...
聊聊迅排设计近期有哪些值得一看的更新
开源在线图片设计器，支持PSD解析、AI抠图等，基于Puppeteer生成图片
迅排设计自从正式开源以来受到了各界广泛关注，Github 仓库更是短短一个月时间就突破 1000+ Star 🎉，受宠若惊！期间我也在不断地对项目进行更新和优化（查看迭代计划），其中自动抠图功能是不少朋友关注的重点之一，于是国庆期间我持续鏖战，对抠图功能进行了全方位的优化和迭代，这也是近期较大的更新内容。
在项目持续曝光期间，我也发现了不少问题并逐一进行记录和修复，希望第一个较为稳定的 Releases 版本可以早日和大家见面~
一些美化更新此次从网上无版权图库中又扒了些作品过来，并将之前杂乱的图片进行了分类，鼠标放置在图片上还可显示来源作者与相关描述等，带来更多挥洒创意和灵感的空间~其它与图片相关的懒加载和排版也进行了一些优化。
分类
懒加载
画布背景支持透明度下载
这个看似不起眼的更新背后实际也有些故事，起初画布背景调为透明是有 Bug 的，底部会透出一个深色而非透明，这是因为画布本身有一个深颜色，只不过它在某些样式的作用下变得半透明了，而调整画布透明度则让原本的颜色显现了出 ...
三分钟复刻B站首页动态Banner（视差效果头图）
之前我尝试使用 JS 实现 B 站的首页 Banner，实现了基本1:1的复刻效果，一来是觉得很有意思，二来也是为了练习前端技术。与此同时我也写了一篇技术文章，详细讲解了整个实现过程的技术细节和原理：《如何用原生 JS 复刻 Bilibili 首页头图的视差交互效果》
肝完文章时 B 站就更换了新的 Banner 图，文章发布一个月后又更新了中秋版本，这次更新也出现了此前未曾谋面的 video 元素效果，我又跃跃欲试，打算复刻一遍这个 Banner 效果。
新增视频类型由于这次的 Banner 中增加了水面波光和萤火虫的复杂动态，所以加入了视频图层来展示，是 webm 格式的视频文件，体积非常小。在之前所写代码的基础上只需要增加一个类型字段，然后按类型创建标签即可：
1234const child = document.createElement(item.tagName || 'img');if (item.tagName === 'video') { child.loop=true; child.autoplay=true; ...
技术文章创作心得分享
本文将分享近段时期以来的技术文章创作心得体会，如果你也正在写作的路上，希望这篇文章能对你有所帮助或启发。
笔者在去年下半年发表了约莫 40 篇文章，几个月内在掘金升级到优秀创作者，达成了里程碑式的小目标，其中一篇文章被官方评选为 2022 年度爆款好文，也算是十分难得的肯定。
为什么写作技术写作确实没有什么门槛，还会有诸多好处，比如：
加深对知识的理解
写文章需要你对问题展开较为全面的思考，同时这个过程中你也可能会需要查阅资料对观点进行补充，促使你主动持续学习，持之以恒必将大有裨益。
集思广益
文章下开放性的讨论往往可以启发你的想法。
求职亮点
经常写技术文章能在一定程度上证明你的学习力，面试官甚至可以参考你的博客内容对你的水平进行更深层次的评估，这比起口头交谈更有说服力。
提升表达力
能把技术原理讲明白透彻是一种不可多得的能力，文字表达同样也需要长时间的锻炼。
如何开始写作
其实说起来，所有的技术文章大体上都可归为两类：记录或分享。
对于大部分人来说，很难一开始就创作体系化的文章，所以我起初都是想到什么就写什么，这个阶段比较多都是写些笔记，谈不上真正的文章。
笔者实践类文章写的 ...
别让时代的悲哀，成为你的悲哀
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
前言最近这段时间，可谓一直都很不太平。
一开始有人说“前端已死”的时候，我身处其中，冷暖自知。
这是我今年找工作，在Boss直聘上花 68 元巨款开的会员，主要功能就是每天有 5 次机会告诉你在某岗位的竞争力，纯纯花钱买焦虑。上面两张图只是普通小公司的一个前端岗位，竟有上千人竞争。
后来也有人说“前端死不了”，我没有发表过什么看法，因为我觉得不值得讨论。
前端发展迅速，同时也充满困境，只有站在一线的开发，才能明白前端本就半死不活。像前两年还有《现代 Web 开发困局》这样的文章在分析前端困局、讨论如何解放生产力，而现在这种声音大部分人可能并不关心。
再到现今一众技术公号不是《前端岗位又爆了》就是《前端这波起飞》的，我也只是微微一笑，软广吹牛从不打草稿。
这篇文章不聊技术，不蹭热点，只是单纯地从一个普通互联网从业者的角度，讲点近段时间以来的一些思考。
危机历史的车轮滚滚而来，它与每个人息息相关。
随着口罩病三年的折磨、俄乌冲突爆发、漂亮国霸权制裁，国家整体经济呈现明显下滑，我们能切身的感觉到，大环境确实变差了 ...
原生JS实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
前言当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。
这种物理学效果的应用在移动端普及后，大部分笔记本触控板也都支持同样的效果。
然而鼠标滚轮的传感器通常采用光电或机械的方式运作，由一个旋转轴和一个传感器组成，旋转轴通常无法做出细微的距离控制，使得距离检测更像是段落式的，这些信号在传输到计算机后，并不能实现丝滑的滚动。
可以通过以下例子感受两种滚动的差异：
https://code.juejin.cn/pen/7272919488994279484
本文将教会你如何让鼠标滚轮也能够丝滑地操作网页，带来更舒适的页面惯性滚动体验，同时讲解其中技术原理与细节，用最少量的代码实现 JS 鼠标惯性滚动。
使用插件要实现平滑的惯性滚动可以引入 lenis 这个库，使用非常简单：
1npm i @studio-freight/lenis
12345678const lenis = new Lenis()fun ...
几行代码实现上传接口，白嫖Github做为在线图床
事情是这样的，某天我在项目里临时需要一个图片上传接口来测试功能，简单来说就是从前端上传图片到服务器然后返回一个可访问的静态资源链接，如果为了这个而去开发一个服务端接口实在是麻烦，而对接阿里云、七牛云这类 oss 服务一样要开发而且还要钱，许多免费在线图床也不会提供 API 的功能。。
于是我经过一番摸索，发现其实白嫖 Github 提供的 api 就可以不用服务器、不花一分钱，简单快速实现我要的上传接口，还自带 https 链接，下面就把详细的过程分享给大家。
0. 注册一个小号先随便用一个邮箱注册个 Github 小号，注意不要使用你正式的 Github 账户，因为下面创建的 Token 如果做权限管控会比较麻烦，所以我们直接用一个小号来创建仓库，这样可以省去许多工作。
1. 创建 Token登录你的小号（注意别登错了），访问：https://github.com/settings/tokens ，点击 Generate new token 按钮，创建一个新 Token：
设置一下过期时间，这里我们选择“不会过期”，然后勾选一下 repo 所有权限：
接着滚到底下点击生成按钮，会 ...
如何用原生 JS 复刻 Bilibili 首页头图视差交互效果
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
最近网上冲浪的时候，发现了 B 站这个首页头图的交互效果非常有趣，如下图所示，当鼠标在画面中左右滑动时，海洋生物会栩栩如生地动起来：
这是通过给图层设置不同的移动速度来实现的视差效果，在佩服 UI 与前端对网页交互效果方面的努力和探索之外，我也沉浸在这片“海洋”中疯狂摸鱼：尝试只使用原生 JS 来复刻它，最终实现了非常还原的效果：
可点击图片进入 码上掘金 中体验完整效果。
本文将一步步介绍整个制作思路，讲解涉及的相关知识点，干货非常多，搬好你的小板凳，咱们话不多说直接开摸吧。
准备工作打开浏览器控制台，查看B站头图的 HTML 结构：
不难看出，我们接下来的思路就是把 banner 中所有的图片用一个 .layer 的 div 包住堆叠起来，然后编写鼠标事件对每张图片应用相应的变换(transform)操作，由于接下来的操作我们都用 JS 来完成，所以布局很简单，只需要一个 div 来充当容器：
1<div id="app">loading...</div> ...