使用哪个 Web 框架或库在每个图像具有唯一 url 的网页上显示 PNG 图像和基本形状？

Posted 2023-03-28

【中文标题】使用哪个 Web 框架或库在每个图像具有唯一 url 的网页上显示 PNG 图像和基本形状？

【英文标题】：Which web framework or library to use for displaying PNG images and basic shapes on them on a web page with unique url per image?

【发布时间】：2019-09-24 11:31:35

【问题描述】：

我想创建一个网页，一次显示一张图像，上面显示形状和注释。每张图片的地址栏中都应该有一个唯一的 URL 地址。

我有一组 PNG 格式的图像。对于每个图像，都有一组形状（矩形、折线 - 以像素为单位的 x、y 坐标对）和注释（图像上的位置 x、y 以像素为单位，以及作为字符串的短文本）显示在其上。 当用户加载图像的唯一 url 时，他们应该会看到其顶部显示的形状和显示为圆形的注释标记。当用户按下标记为“next”的按钮时，页面会加载下一个 PNG 及其相应的形状和注释。用户可以单击注释标记，然后会打开一个文本气球以显示注释的文本。

如何开发这个？我之所以这么问，是因为我不了解 Web 应用程序框架或当前用于在线内容的数据库和图形格式的最佳实践。

我有编程经验 - Python、数据科学、程序几何、用于游戏开发 (C#) 的 Unity、Lua - 但不适用于 Web。 我可以使用 Unity 做一个 WebGL 应用程序来做我想做的事情并将其链接到 mysql 数据库，但感觉就像用火箭筒射击苍蝇。也许有一种更简单、更简单的方法。任何建议或提示将不胜感激。

【参考方案1】：

我认为最好的提示是您问题的标签之一：canvas。

Images 可以被绘制在上面，shapes 也可以。要处理您的标记，您可以将画布上的单击坐标与标记的坐标进行比较（有关获取单击坐标的更多信息，请参阅this post）。注释气球可以通过隐藏或显示一个简单的<div>on click来实现。

至于网络应用程序框架，取决于它的花哨程度，您可以在原生 html 和 css 中“手动”完成它，或者使用具有良好预定义组件的东西，例如 Bootstrap。

根据您将托管此网页的位置，您将或不必担心后端/服务器。有许多托管服务提供商可以提供用户友好的管理面板。

【讨论】：

谢谢@buboh，我试试看