декодирует изображение с помощью JavaScript

У меня есть немного генерируемый JavaScript со страницы JSP, которая выглядит следующим образом:декодирует изображение с помощью JavaScript

var elem = document.getElementById("image"); 
elem.src = "Image?step="+step;

фрагмент кода выше вызывается, когда пользователь нажимает на кнопку, и step является переменной, увеличивается с каждым запуском функции. Image - это сервлет, который генерирует PNG-кодированное изображение.

Это работает, но это очень медленно, потому что сервер должен сгенерировать изображение, когда Клиент этого захочет. Я знаю, что могу предварительно загрузить изображение, но я подумал о лучшем решении. Поскольку я знаю, сколько шагов разрешено, я думал о создании изображений при запросе страницы и встраивании их в JavaScript, возможно, в кодировке Base64, чтобы изображение можно было просматривать на всех ОС.

Возможно ли это? Если да, то как я мог его реализовать? Я не хочу использовать внешние фреймворки JavaScript, такие как jQuery, и мне не нужны браузеры, которые не очень распространены, этого будет достаточно, если он будет работать с браузерами Mozilla и Google Chrome.

источник

2014-09-14 msrd0

Вы, возможно, ищете URIs данных? http://en.wikipedia.org/wiki/Data_URI_scheme Если нет, можете ли вы объяснить, что вы подразумеваете под «декодированием изображения»? – lxg

@ lxg Я думал, что уже сделал. Я хочу написать что-то вроде «var imagestring = », а затем декодировать это изображение, если браузеру следует показать его. – msrd0

@lxg. Вы опубликовали ссылку, как хороший способ сделать это, но «image/png 'не кодируется base64, и я хочу, чтобы он работал на нескольких ОС. – msrd0

Если вы хотите, чтобы встроить источник изображения в HTML-страницы, вы можете сделать следующее:

<img id="image" src="" width="100" height="100" alt="" /> 

<script type='text/javascript'>/* <![CDATA[ */ 
    var img = '<?php echo base64_encode(file_get_contents('/path/file.png')); ?>' 
    document.getElementById('image').src = "data:image/png;base64," + image; 
/* ]]> */</script>

Это поддерживается почти всех браузеров: http://caniuse.com/#feat=datauri ... «Частичная поддержка» для IE означает, что он ограничен изображениями и CSS, но изображения - это то, что мы делаем здесь.

Пример: http://jsfiddle.net/m869e2ar/1/

источник

2014-09-14 18:25:59 lxg

Я думал, что в своем вопросе я упомянул, что использую JSP, а не PHP. Это будет '<% = Base64.getEncoder(). EncodeToString (image_data)%>' – msrd0

Это просто пример. В принципе, вы загружаете файл двоичного изображения, base64 кодирует его и выгружает в переменную JS. – lxg

декодирует изображение с помощью JavaScript

ответ

Смежные вопросы