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

Question

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

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

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

Answer 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));

并img使用数据URI方案将响应放入标签中

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

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

这对您有意义吗？