Отправка / отображение изображения в кодировке 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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

я бы порекомендовал: base64_encode Кодирует данные с помощью MIME base64

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