Мне нужно отправить строку с кодировкой 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);
Clientside , я звоню:
var img = new Image(); img.src = "http://www.myserver.com/generate.php"; img.onerror = function(){alert('error');} $(img).appendTo(document.body);
По какой-то причине это не работает. onerror всегда срабатывает. Например, если посмотреть на Network task FireBug Network task , то мне сообщается, что я получаю правильную информацию заголовка и правильное значение переданных байтов.
Если я отправлю эти данные в виде Content-type: text/plain он работает, строка base64 отображается в браузере (если я вызываю скрипт напрямую). Копирование и вставка этого вывода в src элемента <img> показывает изображение, как ожидалось.
Что я здесь делаю неправильно?
Решение
Спасибо Pekka за то, что указала на мою ошибку. Вам не нужно (вы не можете!) Кодировать данные двоичного изображения как base64 в этом подходе. Без кодировки base64 это просто работает.
В этом случае нет оснований для того, чтобы base64 кодировал данные изображения в первую очередь. То, что вы хотите испустить, – это простые старые данные изображения.
Просто пропустите изображение JPEG как есть.
Единственный способ, который имел бы для меня смысл, – это захватить вывод generate.php через вызов AJAX и напрямую привести результат в свойство src . Это должно работать (хотя и не в IE <8, но я уверен, что вы это знаете). Но если вы можете напрямую вызвать generate.php как источник изображения, я не вижу необходимости в этом.
Если вы установили тип контента в image / jpeg, вы должны указать только данные jpeg без хлама base64. Но вы обрабатываете результат так, как если бы он был html.
Вы эффективно создаете данные uri, что хорошо, но, как вы отметили, только как uri. Поэтому оставьте тип контента таким, как он есть (text / html), и
echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';
и тебе хорошо идти.
Я считаю, что это можно сделать достаточно эффективно, просто используя 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-й параметр – путь изображения, второй – ширина, а затем высота … высота и ширина необязательны
я бы рекомендовал его: base64_encode Кодирует данные с MIME base64
echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';