花了大把时间做的CapsTools

CapsTools

Github

这个是我最近使用了二十多天的爆肝(辛勤劳动成果),写了一个小工具

介绍的话,README就有,所以这里就写开发的坑和感受之类的吧

这是我第一次使用node.js开发js程序,也是我第一次使用electron开发程序,是一次非常宝贵的经验


前期(七月底)

绝区零真好玩

很快速写了一个Tray和全屏的面板主界面,轻轻松松

其中我给面板写了一个无用的css(已经被注释掉了),原本想着是提示快捷键的,后来懒得搞快捷键功能了

翻译方案

很草率,也很后悔

js用三目运算符,isChinese ? '中文' : 'English'

html用data-entext属性存储英文文本,js直接替换

html这里由于ipc有延迟导致英语用户可以看到一瞬间中文,而且mdui组件库部分逐渐一下子还没有反应过来

截屏

首先,我问了AI,一个个推荐我用electron自带的录屏的缩略图,那玩意糊到没法看,又问了几下,说没有库,直接把我带偏了

然后我就开始写Python实现截图,但我不满意,打包之后实在太大了

结果突然发现robot.js,这不就对了嘛

安装提示我要c++,装vs就行了,这个sb网络环境搞了我好久

运行又提示node版本不符合,要不是我上网搜索了我就重装了,其实是和electron版本不符合,要用electron-rebuild

运行又提示我说什么忘了,内存相关,找了一下发现是因为electron21+加入新的管理机制导致这个库的截屏用不了,退回<21的版本就行

(没一会发现nut.js替代,算了不搞了,还是用robot.js吧)

结果这b玩意保存不了,最后是Claude3.5告诉我把buffer转png再转成buffer,确实行了,然后这个库发神经不是rgba二十bgra,我tm服了

OCR

你这程序也没有ocr功能啊,为什么要讲这个

其实一开始是有的,但是……

首先我的想法就是py->exe,使用paddleocr

结果太大了,上传不了github,而且隐藏控制台的话electron获取不到输出

算了用js

不喜欢esm(不能直接用裸标识符,懒得打爆),用的全是cjs,转cjs了之后一堆bug,反手就是上百条webgl上下文丢失,服了搞不定,运行还巨卡,算了

换用tesseract,结果要在主进程开worker,不想这么干

最后,放弃了

你可以在提交历史中看到一句*你妈

翻译

一开始用<iframe>,但是deepl不让用,转向<webview>

bing翻译的url查询一直没搞懂,传入文本没问题,但是找不到翻译语言相关的

剪贴板

由于调用electron和mdui的上下文菜单比较麻烦,反手改成了dialog+menu

一开始我是把剪贴板的整个图片放进去的,截了两个图就很卡了,于是就限制了高度,压缩成缩略图,好多了

自定义图标

其实没什么难的,主要就在于要写不少,最复杂的是pwa的图标(其实都差不多)

先设置成默认的

如果是使用网页favicon,调用api获取它的链接

如果是svg的字符串,套用

如果是文件(后端进行检测)、url(前端进行检测),访问并获取可用性,还要分情况为svg和ico/png,svg直接往html加,ico/png用<img>

字体

一开始我其实用了Google Sans(Product Sans),我以前写的很多程序都用过它作为英文字体,很好看,结果发现不能让我们用,只能删掉了

Noto Sans显示的字母好丑,又找不到能够与Google Sans媲美的免费可商用字体,不爽

打包

使用的是electron-builder打包

首先就是asar的问题,不用asar直接给我报错

按我的需求来又不知道怎么配置,我的需求是有几个文件既要在程序根目录又要在asar中,有几个文件只要在程序根目录

总有几个文件访问不了,后来试配置试了好久,最后用了比较妥协的办法,部分文件滞留在asar了,改代码(导致开发环境已经不能运行了)把src/icon.png改成了resource/app.asar.unpacked/src/icon.png,因为不知道如何让asarUnpack解压在根目录

剪贴板又出了问题,懒得改了,一个是无缘无故出现一个空值剪贴板记录,完全是空的,卡了bug导致操作不了它,另一个是图片的问题,提示的是转dataURL的时候被转的是null,关于这个对象,是获取剪贴板图片->nativeImage修改大小->转dataURL,我怀疑问题在第一步

完成

原神5.0更新了,好玩

写完这个blog已经是第二天,视频是昨天晚上发的,现在下午播放量伪53,点赞1,我他妈……