如何从服务器发送PNG图像通过AJAX在浏览器中显示 [英] how to send png image from server to display in browser via ajax

问题描述

我一直有一个很难用什么一定是一个令人难以置信的正常工作。我上传和图片保存到我的Web服务器和路径保存在MySQL数据库中的文件（这是所有工作）。不工作的事情是获取来自服务器的图像文件，并通过AJAX页面上显示出来。

本来我是想只从数据库中检索的路径，并用图像路径更新标签的的src 属性。这是工作，但这样一来所有的图像都在服务器里的人都可以访问到它们放在文件夹中。不是很好。我只能有属于这些用户访问特定用户的图片。

为了限制访问这些照片我加入该文件夹，它成功地限制访问Apache的指令。问题就变成了，我无法通过设置的src 属性，该路径显示在浏览器中的图像。请参阅我的文章：<一个href="http://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site">http://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这个字符串转换回图像

请参阅此code：

  $。阿贾克斯（{
    网址：get_image.php，
    成功：函数（image_string）{
        //如何从装载的file_get_contents到浏览器这一形象字符串？
    }
}）;
 

解决方案

您可以显示默认的无法访问的形象，以谁被禁止访问图像的用户：

 ＆LT; PHP

$文件= $ _GET ['文件']; //不要忘了清理这个！

标题（内容类型：image / PNG）;
如果（user_is_allowed_to_access（$文件））{
    ReadFile的（$文件）;
}
其他 {
    ReadFile的（有些/默认/ file.png'）;
}
 

和，在客户端：

 ＆LT; IMG SRC =？script.php的文件=路径/到/ file.png/＆GT;
 

---

另外，如果你真的想要或需要通过Ajax发送数据，可以Base64的EN $ C C是$：

 ＆LT; PHP

回声base64_en code（的file_get_contents（$文件））;
 

和使用数据URI方案放置于 IMG 标签的应答

  VAR IMG ='＆LT; IMG SRC =数据：图像/ PNG; BASE64，+ server_reponse +/＆GT;';
 

鉴于Base64的EN codeD数据比原来显著大，你可以在浏览器中使用的库。

---

这是否你明白了？

I have been having a hard time with what must be an incredibly normal task. I upload and save images to my web server and save the path to the file in MySQL data base (this is all working). The thing that doesn't work is fetching an image file from the server and displaying it on the page via ajax.

Originally I was trying to just retrieve the path from the database, and update an tag's src attribute with the path to the image. This was working, but this way all the images are in a folder on the server where people all have access to them. This is not good. I can only have the pictures that belong to certain users accessible by these users.

In order to restrict access to these photos I added an Apache directive on that folder, which successfully restricted access. The problem then became that I could not display the images in the browser by setting the src attribute to that path. See my post: http://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Finally I have learned that I have to use PHP to read the image data directly from the server and send this data to the browser. I have used the file_get_contents() function, which works to convert the image file (PNG) on the server into a string. I return this string to the browser in an ajax call. The thing I can't get is: how to convert this string back into an image using JavaScript?

See this code:

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

解决方案

You could display a default "no access" image to users who are forbidden to access the image:

<?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');
}

And, on the client side:

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

---

Alternatively, if you really really want or need to send the data via Ajax, you can Base64 encode it:

<?php

echo base64_encode(file_get_contents($file));

And place the response in an img tag using the Data URI scheme

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

Given that the Base64 encoded data is significantly larger than the original, you could send the raw data and encode it in the browser using a library.

---

Does that make sense to you?

这篇关于如何从服务器发送PNG图像通过AJAX在浏览器中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！