如何通过ajax从服务器发送png图像在浏览器中显示答案

【问题标题】：how to send png image from server to display in browser via ajax如何通过ajax从服务器发送png图像在浏览器中显示
【发布时间】：2012-09-03 13:59:43
【问题描述】：

我一直很难完成一项非常正常的任务。我将图像上传并保存到我的网络服务器，并将文件的路径保存在 MySQL 数据库中（这一切正常）。不起作用的是从服务器获取图像文件并通过 ajax 将其显示在页面上。

最初我只是想从数据库中检索路径，然后用图像的路径更新标签的src 属性。这是可行的，但是这样所有的图像都在服务器上的一个文件夹中，人们都可以访问它们。这是不好的。我只能让这些用户可以访问属于某些用户的图片。

为了限制对这些照片的访问，我在该文件夹上添加了一个 Apache 指令，它成功地限制了访问。然后问题变成了我无法通过将src 属性设置为该路径来在浏览器中显示图像。见我的帖子：https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

最后我了解到我必须使用 PHP 直接从服务器读取图像数据并将这些数据发送到浏览器。我使用了file_get_contents() 函数，它可以将服务器上的图像文件（PNG）转换为字符串。我在 ajax 调用中将此字符串返回给浏览器。我无法得到的是：如何使用 JavaScript 将此字符串转换回图像？

查看此代码：

$.ajax({
    url: get_image.php,
    success: function(image_string){
        //how to load this image string from file_get_contents to the browser??
    }
});

【问题讨论】：

为什么不用javascript更新img标签的src属性呢？您可以让 src 指向一个 php 脚本，该脚本接受映射到图像的整数值，并让 PHP 脚本服务器端回显文件内容。
你可以把图片的src设为php文件：<img src="/get_image.php"/>然后用php直接输出图片
在 .Net 中，我们将创建一个请求处理程序，该处理程序将接受一个参数并返回内容，就好像它是一个正常的请求一样。我对 PHP 不够熟悉，不知道是否有类似的东西可用，但我确信可以做一些事情。基本概念是您将 image/background-image CSS 的 url 设置为：http://myserver.com/getfile.php?q=myimage.jpg 服务器然后打开文件，获取内容，并将其作为正常的 httpresponse 发送。

标签： php javascript ajax image png

【解决方案1】：

您可以向被禁止访问图像的用户显示默认的“禁止访问”图像：

<?php

$file = $_GET['file']; // don't forget to sanitize this!

header('Content-type: image/png');
if (user_is_allowed_to_access($file)) {
    readfile($file);
}
else {
    readfile('some/default/file.png');
}

而且，在客户端：

<img src="script.php?file=path/to/file.png" />

或者，如果您真的想要或需要通过 Ajax 发送数据，您可以对其进行 Base64 编码：

<?php

echo base64_encode(file_get_contents($file));

并使用Data URI scheme 将响应放在img 标记中

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';

鉴于 Base64 编码的数据明显大于原始数据，您可以发送原始数据并在浏览器中使用 library 对其进行编码。

这对你有意义吗？

【讨论】：

【解决方案2】：

与其通过 AJAX 获取 get_image.php，不如直接使用：

<img src="get_image.php" />

实际上是一样的。您可以只使用 AJAX 动态更新<img>。

【讨论】：

【解决方案3】：

你不能通过 ajax 来做。

你可以这样做：

<img src="script.php?image=image_name" />

然后使用 JavaScript 更改查询字符串。

【讨论】：

【解决方案4】：

您实际上可以在浏览器的img 标签内嵌入图像数据，因此ajax 代码可能如下所示：

$.ajax({
    url: get_image.php,
    success: function(image_string){
        $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
    }
});

请注意，您需要编写此base64_encode 函数。看看this question - 那里给出了函数。

【讨论】：