Javascript 如何通过ajax从服务器发送png图像以在浏览器中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12356152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to send png image from server to display in browser via ajax
提问by jeffery_the_wind
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.
我一直在努力完成一项非常正常的任务。我将图像上传并保存到我的 Web 服务器，并将文件的路径保存在 MySQL 数据库中（这一切正常）。不起作用的是从服务器获取图像文件并通过ajax将其显示在页面上。
Originally I was trying to just retrieve the path from the database, and update an tag's srcattribute 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.
最初我只是试图从数据库中检索路径，并src用图像的路径更新标签的属性。这是有效的，但这样所有图像都在服务器上的一个文件夹中，人们都可以访问它们。这是不好的。我只能让这些用户访问属于某些用户的图片。
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 srcattribute to that path. See my post: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site
为了限制对这些照片的访问，我在该文件夹上添加了一个 Apache 指令，该指令成功地限制了访问。然后问题变成了我无法通过将src属性设置为该路径在浏览器中显示图像。见我的帖子：https: //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?
最后我知道我必须使用PHP直接从服务器读取图像数据并将这些数据发送到浏览器。我使用了file_get_contents()函数，该函数用于将服务器上的图像文件 (PNG) 转换为字符串。我在 ajax 调用中将此字符串返回给浏览器。我无法得到的是： 如何使用 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??
}
});
回答by Alexei
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:
或者，如果您真的想要或需要通过 Ajax 发送数据，您可以对它进行 Base64 编码：
<?php
echo base64_encode(file_get_contents($file));
And place the response in an imgtag using the Data URI scheme
并img使用数据 URI 方案将响应放置在标记中
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.
鉴于 Base64 编码数据明显大于原始数据，您可以发送原始数据并使用库在浏览器中对其进行编码。
Does that make sense to you?
这对你有意义吗？
回答by rationalboss
Instead of getting get_image.php through AJAX, why not just use:
与其通过 AJAX 获取 get_image.php，不如直接使用：
<img src="get_image.php" />
It's practically the same thing. You can just use AJAX to update the <img>dynamically.
这实际上是一样的。您可以只使用 AJAX 来<img>动态更新。
回答by Korikulum
You can't do it via ajax.
你不能通过ajax做到这一点。
You could do something like this:
你可以这样做：
<img src="script.php?image=image_name" />
Then use JavaScript to change the query string.
然后使用 JavaScript 更改查询字符串。
回答by Aleks G
You can actually embed image data inside the imgtag in the browser, therefore ajax code could look like this:
您实际上可以img在浏览器的标签内嵌入图像数据，因此 ajax 代码可能如下所示：
$.ajax({
url: get_image.php,
success: function(image_string){
$(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
}
});
Note that you will need to write this base64_encodefunction. Have a look at this question- the function is given there.
请注意，您将需要编写此base64_encode函数。看看这个问题- 那里给出了功能。
