茶无味的一天

前言对于一款数字时代的图片编辑工具而言，抠图工具扮演着越来越重要的角色。它能轻松地将图像中的目标与背景进行分离，为用户提供便捷高效的编辑体验。 在过去，抠除图像背景往往是一件复杂又繁琐的工作，而实现一个 AI 自动抠图工具也并非易事，因为它需要不少服务器的算力消耗以及大量训练模型的成本。 而现在，我将展示在仅使用 1核1G运存 的超低服务器资源下，可以实现多么令人惊叹的抠图工具！如下所示，只需上传图片，便可自动抠除背景。在线体验 因为带宽也很小（仅 1M ）所以在线体验建议不要上传太大的图像。 接下来，我将带你学习如何部署，通过简单几步即可实现这款强大的 AI 抠图工具。同时，我也将用通俗易懂的文字带你剖析 AI 抠图工具背后的工作原理，帮助你更好地理解其背后的算法和逻辑。废话不多说，让我们开始吧！ 开始部署首先我们需要使用 Rembg 这个库，它是基于 U^2-Net 模型构建的一个用于图像背景去除的 Python 工具。 为了让开发者快速掌握它，我们并不需要学习 Python（除非自己训练模型），我们只需要会一点 docker 的使用，然后运行以下命令： 1docker r ...

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划…..这些就放在日后谈吧。 最近挤出时间来完善了这个项目，正式开源后在一天内就收获了上百个Star，今天想向大家分享下这个开源图片编辑器项目——迅排设计，以及我的一些感悟和开源体验。 在线 Demo | 文档网站 | Github 开源地址: palxiao/poster-design 项目速览1234git clone https://github.com/palxiao/poster-design.gitcd poster-designnpm run prepared # 快捷安装依赖指令npm run serve # 本地运行 将同时运行前端界面与图片生成服务(3000与7001端口)，合成图片时本地会启动一个Chrome浏览器实例。 👇🏻下面一起来看下都有些什么功能吧。 上传 PSD 模板点击 “我的” - “资源管理”，上传PSD模板按钮，进入PSD解析上传界面界面 ...

本文翻译自外网文章《Dialogs, modality and popovers seem similar. How are they different?》，作者 Hidde de Vries 是一名自由职业前端、可访问性和系统设计专家，曾在荷兰政府、W3C (WAI)、Sanity.io 和 Mozilla 等组织工作。 Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。 我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似，至少在我看来是这样的，那就让我们开始吧！ 注意：在撰写本文时，popover它仍然是一个提案，仅作为实验提供。目前 popover 可以在以下环境测试： Chromium，在“实验性 Web 平台功能”标志的背后（计划于 2023 年 5 月底在稳定版 Chrome/Edge 中发布） S ...

本文记录了一次服务器严重故障的问题排查历程，故事虽然颇为曲折，最后却发现是天灾不是人祸，虚惊一场，还是我太菜了啊。 事情是这样的，那是一个炎热的下午，我正吹着空调欣然品茶，突然命运之手向我伸出了魔爪，打断了我摸鱼的美妙时光——我的所有站点都无法访问了！这让我的心情热得像天气一样火啊！ 直觉告诉我这是服务器出问题了，于是我赶忙登录查看主机，进门直奔 docker： 事情似乎有点严重，我赶紧 check 其它地方： linux 系统关键目录均没有遭到破坏，首先排除服务器被黑 mysql 数据库完好无损，肯定不是勒索病毒 这种奇怪的违和感不知道是怎么回事，但我也松了一口气，至少不是最坏的情况。紧接着我打开了云主机的后台看了一下数据，除了下午三点时的链接数突然飙高以外，没有发现其它异常： 由于之前就一直受到垃圾漏洞扫描工具的骚扰，链接数飙高这种事我已见多不怪，只是时机太过巧合，究竟是天灾还是人祸？我一时间也不得而知，所以先整理一下目前的情况： docker 容器基本全报异常退出了，但没有被删 宿主机容器的映射目录空了，所以现在基本也没办法重新启动容器 容器 drone 还在活跃状态 ...

MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口，一旦监测到节点发生变化，就会通知回调函数执行相应的逻辑。该 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“数据驱动视图”，使得这个 API 容易被大众遗忘。 本文将介绍 MutationObserver 的基本原理、使用方法和应用场景，帮助读者更好地理解和应用这个灵活且强大的 API。 前言事情是这样的，某天我想给文档网站加个访问量统计的插件，这个插件是第三方的，工作原理是将数据填充到页面中特定 id 的节点上，例如有一个 <span id="pv"></span> 的节点，插件加载完成后就会通过 dqS (document.querySelect) 找到 id 为 pv 的节点然后把 pv 数据渲染上去。问题就在于，我这个文档网站并不是静态的，所有工作都是在运行时完成，类似一个用 Vue 驱动的网页，一开始只有 #app 节点，所以这个第三方脚本不能直接放在 index.html 文档中加载，否则可能页面还没渲染完，脚本就已经开始 dq ...

最近 jQuery 似乎又“回光返照”了一下，窜稀式地连更了几个小版本。我仔细看了看，并没有新功能出现，不过还挺有意思的，也让我学习到了新的东西。简单来说，这几个版本的更新主要与 Chrome 引入新选择器产生的缺陷有关。那么谷歌浏览器是如何导致 jQuery 产生 Bug 的，又是为何在修复之后又引发了新 Bug 的，这还得从 :has 伪类说起。 关于 :has() 伪类CSS 在很早前就存在子代和后代选择器，而父元素的选择器出于性能的考虑却迟迟没有浏览器能支持，虽然规范早已存在，但是真正支持它却是不久前才发生的事。 这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法，例如： 1h1:has(+ p) { color: red; } 这段 css 表示的是：选择一个 h1 标签，当它有一个相邻节点是 p 标签时，这个 h1 标签文字会显示为红色，蛮好理解的对吧。 该伪类在 2022 年由 Safari 浏览器首先开始支持，随后 Chrome 105 也启用了这个原生的 :has 伪类，那么这个新选择器的支持为什 ...

CSS 隐藏元素的方法你能说出来几种？ 这是一个在 web 前端面试中常会提及的基础问题，聊这个话题不仅仅只是讨论“茴”字有几种写法，更是能从一个简单的问题中体现出你的 CSS 边界能力，本文提炼了十种最实用的方法，希望对你有所帮助。 常规方法display: none;结构消失，会触发回流重绘（Reflow & Repaint）。 opacity: 0;结构保留，占据空间，可以正常触发事件，因触发硬件加速所以不发生回流和重绘。 visibility: hidden;结构保留，占据空间，仅触发重绘，不会触发事件（无法选中）。 content-visibility: hidden;设置元素内容可见性，设置的元素本身不受影响。hidden 隐藏效果与 display: none 类似，但实际浏览器只是跳过了内容的渲染，还保留着内容的渲染状态，性能上有优势。 注意：该属性目前还处于实验性阶段，使用时需要考虑浏览器兼容性问题。 逃逸视窗position + left/top利用绝对定位 position 设置 absolute 或 fixed，同时 left 或 top 设置 -9 ...

windows墙内打包失败办法在网络环境不好(无科学上网)的条件下，项目可能可以启动成功却无法打包，注意查看报错信息，如下图所示： 这种都是缺少相关包导致的问题，根据报错信息手动下载相应的资源，放入 C:\Users\你的用户名\AppData\Local\electron\Cache 目录下即可。 淘宝镜像：https://npm.taobao.org/mirrors/electron/ NSIS下载：https://nsis.sourceforge.io/Download 我这里windows打包缺少了nsis，下载后放入目录如下： 之后再运行打包即成功： any-note-book Setup 0.1.0.exe 为安装包，win-unpacked 为直接打开运行的程序。 不同系统 Cache 位置如下： Linux: $XDG_CACHE_HOME or ~/.cache/electron/ MacOS: ~/Library/Caches/electron/ Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/ ...

如今的我们对算法可谓并不陌生，由于互联网发展迅猛，哪怕没有系统学习过计算机底层理论的程序员，也接触过无数的算法。 昨天笔者看到一个开放性思考题，内容是这样的： 如果一个程序只运行一次，在编写它的时候，你是采用最直观但是效率较低的算法，还是依然寻找复杂度最优的算法？ 可能你心中已有答案，但这个问题我们放到文末再聊，本篇主要是科普向的算法入门文章，我将从最初的计算机讲起，用通俗易懂的话来带你重新认识下算法。 前言图灵提出了计算机的数学模型、冯·诺依曼确定了计算机通用的系统结构，而如果要问图灵和冯·诺依曼之后对计算机科学贡献最大的人是谁，那就不得不提到高德纳了，正是他奠定了计算机算法的基础。我们知道，没有控制程序，只有一系列硬件算不上是计算机，程序之于计算机是必不可少的，而程序的灵魂，就在于算法。 计算机诞生之初在早期计算机领域里，哪些控制功能要通过开关电路做成硬件，哪些又该由程序控制，这些边界其实不像如今这么清晰。 教科书上对世界第一台通用计算机的定义，是20世纪40年代所研制的电子计算机埃尼阿克（ENIAC），而事实上这台计算机在研制时也没有搞清楚程序是怎么一回事，它说到底还是一台专 ...

项目背景作为一名阿宅，摄影可能是为数不多能让我出门的事情了，以前在广州有很多漫展，基本一两个月必有一场，我也经常会去蹭拍coser，不得不说拍照技术都是在那段时期锻炼出来的。可惜好景不长，这几年疫情反复不断，距离上一次我拿起相机甚至可以追溯到两年前，实在是泪目。既然不能出去拍照，那只能继续宅着敲代码度日了，于是就有了这个在线相册的小项目，用来方便自己放上一些觉得还不错的摄影作品，当然，也可以记录与展示一些生活照片。 这是一个纯前端的项目，不需要开发后端，没有数据库，只需要把照片丢进去，Git提交一下站点就出来了，就很简单。不用买服务器，不搞OSS，总之就是完全免费，全是白嫖的艺术，这篇文章中我会介绍整个项目的开发历程，看完你将收获： 一个 Vue3 + Node 快速生成漂亮的在线相册的项目 实现瀑布流、懒加载、Node解码图片、缩略图生成、元数据读取、提取颜色等技巧 快速集成一个音乐播放器，同步网易云歌单 如何部署仓库地址：https://github.com/palxiao/fast-album fork项目，clone到本地，运行 npm run pre 安装依赖 把你的照 ...