小编典典

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

ajax

我一直很难完成必须完成的一项非常正常的任务。我将图像上传并保存到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??
    }
});

阅读 474

收藏
2020-07-26

共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在浏览器中对其进行编码。


这对您有意义吗?

2020-07-26