Отправка/отображение кодированного base64 изображения

Question

Мне нужно отправить закодированную строку base64 клиенту. Поэтому я открываю и читаю файл изображения на сервере, кодирую его и отправляю в браузер эти данные вместе с типом контента image/jpeg. Пример в PHP:

$image  = $imagedir . 'example.jpg'; 
$image_file = fopen($image, 'r'); 
$image_data = fread($image_file, filesize($image)); 

header("Content-type: image/jpeg"); 
echo 'data:image/jpeg;base64,' . base64_encode($image_data); 

клиентскую, я звоню:

var img  = new Image(); 
img.src  = "http://www.myserver.com/generate.php"; 
img.onerror = function(){alert('error');} 
$(img).appendTo(document.body); 

Это не работает по какой-то причине. onerror всегда срабатывает. Например, если смотреть на FireBug Network task, он сообщает мне, что я получаю правильную информацию заголовка и правильное значение переданных байтов.

Если я отправлю эти данные как Content-type: text/plain, это работает, строка base64 отображается в браузере (если я вызываю скрипт напрямую). Копирование и вставка этого вывода в src элемента <img> показывает изображение, как ожидалось.

Что я здесь делаю неправильно?

Решение

Благодаря Pekka указал мне на мою ошибку. Вам не нужно (вы не можете!) Кодировать данные двоичного изображения как base64 в этом подходе. Без кодировки base64 это просто работает.

Answer 1

В этом случае нет оснований для того, чтобы base64 кодировал данные изображения в первую очередь. То, что вы хотите испустить, - это простые старые данные изображения.

Просто передайте изображение JPEG как есть.

Единственный способ, который имел бы для меня смысл, - это захватить вывод generate.php через вызов AJAX и сразу же поместить результат в объект src. Это должно работать (хотя не в IE < 8, но я уверен, что вы это знаете). Но если вы можете позвонить generate.php непосредственно в качестве источника изображения, я не вижу необходимости в этом.

Answer 2

Если вы установили тип содержимого в image/jpeg, вы должны указать только данные jpeg без бремени base64. Но вы обрабатываете результат так, как если бы он был html.

Вы эффективно создаете данные uri, что хорошо, но, как вы отметили, только как uri. Поэтому оставьте тип контента таким, как он есть (текст/html), и

echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">'; 

и вы в порядке.

Answer 3

Я считаю, что это может быть сделано достаточно эффективно только с помощью только PHP ... Вы можете использовать приведенную ниже функцию для отображения изображения в base64 кодированные данные

function binaryImages($imgSrc,$width = null,$height = null){ 
    $img_src = $imgSrc; 
    $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); 
    $img_str = base64_encode($imgbinary); 

    if(isset($height) && isset($width)) 
    { 
    echo '<img src="data:image/jpg;base64,'.$img_str.'" height="'.$height.'" width="'.$width.'"/>'; 
    } 
    else 
    { 
    echo '<img src="data:image/jpg;base64,'.$img_str.'"/>'; 
    } 
} 

, как использовать эту функцию

binaryImages("../images/end.jpg",100,100); 

запустить функцию binaryImages .. 1-й параметр - путь изображения, второй - ширина, а затем высота ...высота и ширина являются необязательными

Answer 4

я бы рекомендовал его: base64_encode кодирует данные с MIME base64

echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';