如何從服務器發送png圖像，通過ajax在瀏覽器中顯示

Question

我一直很難完成一項非常正常的任務。 我將圖像上傳並保存到我的Web服務器並將路徑保存到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??
    }
});

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

並使用數據URI方案將響應放在img標記中

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

鑒於Base64編碼數據明顯大於原始數據，您可以使用庫發送原始數據並在瀏覽器中對其進行編碼。

---

這對你有意義嗎？

Answer 2

而不是通過AJAX獲取get_image.php，為什么不使用：

<img src="get_image.php" />

這幾乎是一回事。 您可以使用AJAX動態更新<img> 。

Answer 3

你不能通過ajax來做到這一點。

你可以這樣做：

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

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

Answer 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函數。 看看這個問題 - 在那里給出了功能。