javascript - 如何使用JS显示数据库中的图片

Question

所以我制作了一个网站，显示存储在 mysql 数据库中的 FPS 信息。对于游戏的每一秒，我都有一对数字(fps)-图像(屏幕截图)。

我在用 JavaScript 制作的折线图中显示数字。所需的行为是当我单击图表中的项目符号时，该特定秒的屏幕截图将显示在页面上的 div 中。

我不得不提一下，屏幕截图存储在数据库中，并且尺寸非常小。然后我使用 PHP 进行显示，如下所示:

$query = "SELECT `image` FROM `logs` WHERE `session_id`=".$_GET['session']." AND `second`=".$second;
$sth = $mysqli->query($query);
$result=mysqli_fetch_array($sth);
if (!empty($result))
    echo '      <img id="screen" src="data:image/jpg;base64,'.base64_encode($result['image']).'"/>';

我现在使用的方法是，当我点击图表中的项目符号(用JS记录的 Action )时，我将其作为GET参数发送，然后用PHP读取它，如下所示:

window.location.href = url + "?second=" + second;

这个方法显然会刷新我的页面。问题是，我制作的图表还具有缩放/滚动选项，并且每当刷新页面时就会重置，这使得用户体验非常糟糕。

对于这种特殊情况(我必须为每次点击/图片查询数据库)，是否有任何方法可以在不刷新页面的情况下显示屏幕截图？也许有更好的方法来解决这个问题？

谢谢。

Answer 1

我认为您有 2 种解决方案，Ajax 或 Websocket，具体取决于您的需求。

AJAX
Ajax 允许异步，仅当您需要时，调用服务器并从 URL 获取数据，该 URL 可以是 Web 服务或 PHP 页面...也许，这对于您的情况来说是更好的解决方案。

为了方便起见，您可以通过下载script来使用JQuery库。并将其插入到您的 HTML 中:

<script src="jquery-3.0.0.min.js"></script>

使用 JQuery 调用服务器:

$.ajax({
    url: url + "/yourphppage.php",
    data: "parameter=" + yourOptionelParameter,
    async: false,
    success: function(data) {
        refreshYourChart(data);
    },
    error: function() {
        alert("Your error");
    },
    contentType: 'charset=utf-8'
});

或者如果您愿意的话pure javascript .

现在，您只需在服务器端处理数据的呈现即可。它可能是您想要的 HTML、TXT、JSON、XML...

Websocket
Websocket 就像在服务器和客户端之间打开的永久隧道。双方均可实时询问或发送数据。

它似乎是一个库服务器端:
http://socketo.me/
在客户端，这非常简单:
Nice documentation on mozilla website

希望有帮助。祝你好运。