这是一个创建于 135 天前的主题，其中的信息可能已经有所发展或是发生改变。
我想做个收集游戏信息，输出玩家的战绩图，最近活动图，某个武器的属性图等等。
数据信息获取是从官方 API 来的，有部分是自己需要手动整理的
重点在于生成图片部分，我需要对收集到的信息、对应的小图标（如武器图标、属性图标等）合成一个大图片，这个大图片也是我自己设计的排版，需要让对应的信息按照固定的排版来输出。
我做了个简单的 figma 设计： https://www.figma.com/design/BFPgN0hDG0VmrkheFtIL4J/%E7%BB%93%E6%9E%9C%E5%9B%BE
我想咨询的问题是：
- 如何平衡图像设计和图像生成性能部分。比如我用 figma 做设计，但是我想要渲染的时候，我需要确定每个小图像的坐标，就会比较麻烦。若我使用前端(headless chrome 等)基于 html 来获取图像，又感觉这样性能会不够，会吃很多内存，在请求量多的时候也会比较吃紧
- 怎么做缓存机制。比如请求获取武器数据时，可能同一把武器很多个人访问，而这把武器一般是不会有变动的，那我对这种类似“静态”的数据，我想的就是第一次访问时本地也存一份，后续可以返回已经有的。另外如请求活动图时，用户之间的差异仅在数据上，用于辅助显示的图标都是相同的。那我如何对这些小图片做很好的缓存机制呢？
- 我预期的 QPS 应该会在 3-4k 左右，主要的压力是在图片生成这里，我需要使用负载均衡一类的方法降低我服务器的压力吗？
我目前打算使用 python 去实现，也接受更换到更高性能的语言的选项。我想做一个开源项目，因此希望部署的时候不会那么麻烦。
数据信息获取是从官方 API 来的，有部分是自己需要手动整理的
重点在于生成图片部分，我需要对收集到的信息、对应的小图标（如武器图标、属性图标等）合成一个大图片，这个大图片也是我自己设计的排版，需要让对应的信息按照固定的排版来输出。
我做了个简单的 figma 设计： https://www.figma.com/design/BFPgN0hDG0VmrkheFtIL4J/%E7%BB%93%E6%9E%9C%E5%9B%BE
我想咨询的问题是：
- 如何平衡图像设计和图像生成性能部分。比如我用 figma 做设计，但是我想要渲染的时候，我需要确定每个小图像的坐标，就会比较麻烦。若我使用前端(headless chrome 等)基于 html 来获取图像，又感觉这样性能会不够，会吃很多内存，在请求量多的时候也会比较吃紧
- 怎么做缓存机制。比如请求获取武器数据时，可能同一把武器很多个人访问，而这把武器一般是不会有变动的，那我对这种类似“静态”的数据，我想的就是第一次访问时本地也存一份，后续可以返回已经有的。另外如请求活动图时，用户之间的差异仅在数据上，用于辅助显示的图标都是相同的。那我如何对这些小图片做很好的缓存机制呢？
- 我预期的 QPS 应该会在 3-4k 左右，主要的压力是在图片生成这里，我需要使用负载均衡一类的方法降低我服务器的压力吗？
我目前打算使用 python 去实现，也接受更换到更高性能的语言的选项。我想做一个开源项目，因此希望部署的时候不会那么麻烦。
5 条回复 • 2024-07-10 16:06:00 +08:00
 |
1
Mithril 135 天前  2
用 headless chrome 算是比较方便的，特别是你这上面还有些文字要填，比如上面那些数值等等。而且这些东西也就初次启动比较耗时，这么简单的页面渲染一下并不废太多时间。
当然你要是这个也不想搞，那就直接把这 HTML 扔给客户。不确定你展示给客户的结果是网页还是什么，网页的话直接嵌进去就行了。 如果是非要个图，那你也可以直接用 SVG 。SVG 也就是个 XML ，你可以手动调好 SVG 的样式，然后在特定的位置替换进去小图标和文字。 你可以认为 SVG 是个简化版的 HTML ，它可以用一些相对轻量的东西去渲染。比如你可以直接用个图形库，而不用拖一个 headless chrome 。 至于负载均衡，你可以先把渲染这块写的相对独立一些。等真的压力上来了再拆成单独的服务。 按照这个方案，不过是塞个字符串然后返回渲染好的图像，拆出来也很容易。 另外你这些小图标，如果确实体积比较小，你可以直接存 base64 字符串。这样你替换到 HTML 或者 SVG 也都很方便。 |
 |
2
tomatocici2333 135 天前
啊 v2 还能看见噶点
|
 |
3
Yanlongli 135 天前
多个图片要合成一张图片，然后对合成后的图片做缓存。
合成是真的合成，不是堆叠在一起“看上去”像是一张。 |
 |
4
CannonLau OP @Mithril 感谢，我看完之后又去了解了一下，我个人本身对 Electron 就不是很喜欢，所以我对 headless chrome 这种有一些反感。后面我去了解了一下您提到的 svg 相关内容。
简单浏览了一遍 MDN 上 svg 的 tutorial 后，我注意到了 <image> 标签可以嵌入 `raster image` 即 png, jpeg 等。后我又了解了一下如何渲染 svg 文件输出 png ，有几个工具库引起了我的注意：inkscape, resvg 。其余的不少也看了，但是多多少少限制比较多，特别是我还需要指定 font family 来渲染字体，我发现很多工具都对自定义字体支持有限，因此我打算先对这两个工具了解一下，然后做一个 demo 试试看效果。 然后也问了几个朋友，他们都说我还没真正做起来，先不用太多考虑高 QPS 的事情，先做一个简单能用的版本，后面再去优化。我觉得也是，想的太多了，要先做起来。 |
 |
5
zikkeung 134 天前
html2png
|
Select Language