как отправить изображение в формате PNG с сервера для отображения в браузере с помощью AJAX

голоса
8

Я с трудом с тем, что должно быть невероятно нормальная задача. Загружать и сохранять изображения на моем веб-сервере и сохранить путь к файлу в базе данных 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??
    }
});
Задан 10/09/2012 в 15:52
пользователем
На других языках...                            


4 ответов

голоса
2

Вы не можете сделать это с помощью AJAX.

Вы могли бы сделать что-то вроде этого:

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

Затем, чтобы изменить строку запроса с помощью JavaScript.

Ответил 10/09/2012 в 15:56
источник пользователем

голоса
3

Вместо того, чтобы get_image.php через AJAX, почему бы не просто использовать:

<img src="get_image.php" />

Это практически то же самое. Вы можете просто использовать AJAX для обновления <img>динамически.

Ответил 10/09/2012 в 15:58
источник пользователем

голоса
1

Вы действительно можете вставлять данные изображения внутри 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функцию. Взгляните на этот вопрос - функция , которая там.

Ответил 10/09/2012 в 16:01
источник пользователем

голоса
14

Вы можете отобразить по умолчанию «нет доступа» изображений для пользователей, которым запрещено доступ к изображению:

<?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 кодированные данные значительно больше , чем оригинал, вы можете отправить исходные данные и кодировать его в браузере с помощью библиотеки .


Значит ли это имеет смысл для вас?

Ответил 10/09/2012 в 16:03
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more