请教各位，关于游戏战绩图片生成的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 171 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想做个收集游戏信息，输出玩家的战绩图，最近活动图，某个武器的属性图等等。

数据信息获取是从官方 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

Mithril

171 天前

用 headless chrome 算是比较方便的，特别是你这上面还有些文字要填，比如上面那些数值等等。而且这些东西也就初次启动比较耗时，这么简单的页面渲染一下并不废太多时间。

当然你要是这个也不想搞，那就直接把这 HTML 扔给客户。不确定你展示给客户的结果是网页还是什么，网页的话直接嵌进去就行了。
如果是非要个图，那你也可以直接用 SVG 。SVG 也就是个 XML ，你可以手动调好 SVG 的样式，然后在特定的位置替换进去小图标和文字。

你可以认为 SVG 是个简化版的 HTML ，它可以用一些相对轻量的东西去渲染。比如你可以直接用个图形库，而不用拖一个 headless chrome 。
至于负载均衡，你可以先把渲染这块写的相对独立一些。等真的压力上来了再拆成单独的服务。
按照这个方案，不过是塞个字符串然后返回渲染好的图像，拆出来也很容易。

另外你这些小图标，如果确实体积比较小，你可以直接存 base64 字符串。这样你替换到 HTML 或者 SVG 也都很方便。

tomatocici2333

171 天前

啊 v2 还能看见噶点

Yanlongli

171 天前

多个图片要合成一张图片，然后对合成后的图片做缓存。
合成是真的合成，不是堆叠在一起“看上去”像是一张。

CannonLau

170 天前

@Mithril 感谢，我看完之后又去了解了一下，我个人本身对 Electron 就不是很喜欢，所以我对 headless chrome 这种有一些反感。后面我去了解了一下您提到的 svg 相关内容。

简单浏览了一遍 MDN 上 svg 的 tutorial 后，我注意到了 <image> 标签可以嵌入 `raster image` 即 png, jpeg 等。后我又了解了一下如何渲染 svg 文件输出 png ，有几个工具库引起了我的注意：inkscape, resvg 。其余的不少也看了，但是多多少少限制比较多，特别是我还需要指定 font family 来渲染字体，我发现很多工具都对自定义字体支持有限，因此我打算先对这两个工具了解一下，然后做一个 demo 试试看效果。

然后也问了几个朋友，他们都说我还没真正做起来，先不用太多考虑高 QPS 的事情，先做一个简单能用的版本，后面再去优化。我觉得也是，想的太多了，要先做起来。

zikkeung

170 天前

html2png