Как получить блоб изображения из JSP в JavaScript?

Question

Я получил большой двоичный объект вместе с некоторыми другими данными из таблицы, например, name и image:

name = varchar, image = blob

Я установил это для объекта в моем фильтре и передал его в файл JSP:

request.setAttribute("info", object);

В файле JSP я получаю эти данные:

request.getAttribute("info");

Теперь, когда у меня есть данные из этого объекта, как мне передать эту информацию в мой файл JS и визуализировать изображение как источник для файла JS?

Я пытаюсь:

    <div>
         <script type="text/javascript" src="jsFile.js></script>
    </div>

var name = <%=info.name%>;
var image = <%=info.image%>

Кажется, это просто не работает. Как правильно это сделать?

Answer 1

Это не сработает.Оставьте этот блоб на стороне сервера.JavaScript на стороне клиента не может ничего сделать с двоичными данными.Все, что ему нужно, это URL-адрес изображения, чтобы он мог ссылаться на него в атрибуте src элемента HTML <img>, чтобы веб-браузер, в свою очередь, мог выполнять свою работу по загрузке и отображению изображения.Лучше всего включить идентификатор изображения в URL.Название уникально для изображения, верно?Вместо этого используйте это в URL.

Первый шаг - позволить JS создать элемент HTML <img> с соответствующим атрибутом src, который указывает на URL, который возвращает изображение.Предполагая, что вы подготавливаете данные следующим образом

String name = "foo.png";
String imageURL = "imageservlet/" + name;
request.setAttribute("imageURL", imageURL);

и печатаете их в JSP (!), Как если бы это были переменные JS следующим образом

<script>
    var imageURL = '${imageURL}';
    // ...
</script>

(пожалуйста,обратите внимание, что эти одинарные кавычки, таким образом, являются обязательными для представления их в виде строковой переменной JS)

, чтобы они оказались в сгенерированном источнике HTML следующим образом (щелкните правой кнопкой мыши страницу в браузере и выполните Просмотр источника чтобы проверить это)

<script>
    var imageURL = 'imageservlet/foo.png';
    // ...
</script>

тогда вы можете создать изображение следующим образом

var img = document.createElement("img"); // or getElementById("someId")?
img.src = imageURL;
// ... add to document? 

(обратите внимание, что это всего лишь пример, я понятия не имеючто такое функциональное требование и что вы хотели бы сделать с этим элементом изображения, даже больше, возможно, JS-код вообще не нужен для конкретного функционального требования)

, чтобы он в конечном итогеэто в HTML:

<img src="imageservlet/foo.png" />

Теперь вторым шагом является создание сервлета , который прослушивает шаблон URL-адреса /imageservlet/*, извлекает изображение как InputStream избазы данных с помощью переданного идентификатора изаписывает его в OutputStream ответа вместе с набором правильных заголовков ответа.Короче говоря, я уже писал несколько ответов о том, как это сделать, они содержат фрагменты исходного кода:

• Как получать и отображать изображения из базы данных на странице JSP?
• Запись изображения в ответ сервлета с наилучшей производительностью

Answer 2

Вы можете получить доступ к своим данным из скрипта, если вы установите переменные в блоке скрипта перед вашим jsFile.js.Т.е.:

<div>
    <script type="text/javascript">
        var name = <%=info.name%>;
        var image = <%=info.image%>;
    </script>
    <script type="text/javascript" src="jsFile.js></script>
</div>

Я не уверен, как вы собираетесь обрабатывать данные двоичного (BLOB) изображения?Обычно это записывается в файл изображения на сервере и на него ссылается тег img:

<img src="/path/to/myimage.jpg" />

Вместо того, чтобы передавать данные BLOB-объекта в файл JSP, я бы предложил использовать сервер (ваш сервлет) передать URL в JSP, который браузер может использовать для получения изображения через тег img.Вы можете либо записать данные BLOB-объекта в URL-адрес, либо написать сервлет, который записывает данные Content-type: image/jpeg (или аналогичные) при передаче идентификатора, например:

<img src="http://www.yourserver.com/GetImage?imageId=xxx" />