Мобильная версияОтправка/отображение изображения в кодировке Base64 ⇐ Jquery
-
Гость
Отправка/отображение изображения в кодировке Base64
Мне нужно отправить клиенту строку в кодировке base64. Поэтому я открываю и читаю файл изображения на сервере, кодирую его и отправляю эти данные вместе с типом контента image/jpeg в браузер. Пример на PHP:
$image = $imagedir . 'пример.jpg'; $image_file = fopen($image, 'r'); $image_data = fread($image_file, размер файла($image)); header("Тип контента: изображение/jpeg"); echo 'data:image/jpeg;base64,' . base64_encode ($ image_data); Клиентская сторона, я звоню:
var img = новое изображение(); img.src = "http://www.myserver.com/generate.php"; img.onerror = function(){alert('error');} $(img).appendTo(document.body); По какой-то причине это не работает. onerror всегда срабатывает. Например, просмотр Сетевой задачи FireBug говорит мне, что я получаю правильную информацию заголовка и правильное значение переданных байтов.
Если я отправляю эти данные как Content-type: text/plain, это работает, строка base64 отображается в браузере (если я вызываю скрипт напрямую). Копирование и вставка этого вывода в src элемента показывает изображение, как и ожидалось.
Что я здесь делаю не так?
Решение
Спасибо Pekka за указание на мою ошибку. При таком подходе вам не нужно (вы не можете!) кодировать эти двоичные данные изображения как строку base64. Без кодировки base64 это просто работает.
Мне нужно отправить клиенту строку в кодировке base64. Поэтому я открываю и читаю файл изображения на сервере, кодирую его и отправляю эти данные вместе с типом контента image/jpeg в браузер. Пример на PHP:
$image = $imagedir . 'пример.jpg'; $image_file = fopen($image, 'r'); $image_data = fread($image_file, размер файла($image)); header("Тип контента: изображение/jpeg"); echo 'data:image/jpeg;base64,' . base64_encode ($ image_data); Клиентская сторона, я звоню:
var img = новое изображение(); img.src = "http://www.myserver.com/generate.php"; img.onerror = function(){alert('error');} $(img).appendTo(document.body); По какой-то причине это не работает. onerror всегда срабатывает. Например, просмотр Сетевой задачи FireBug говорит мне, что я получаю правильную информацию заголовка и правильное значение переданных байтов.
Если я отправляю эти данные как Content-type: text/plain, это работает, строка base64 отображается в браузере (если я вызываю скрипт напрямую). Копирование и вставка этого вывода в src элемента показывает изображение, как и ожидалось.
Что я здесь делаю не так?
Решение
Спасибо Pekka за указание на мою ошибку. При таком подходе вам не нужно (вы не можете!) кодировать эти двоичные данные изображения как строку base64. Без кодировки base64 это просто работает.
