Встраивание изображения в HTML в Java? - PullRequest
Новая
       25

Встраивание изображения в HTML в Java?

3 голосов
/ 21 февраля 2012

У меня есть этот код, где я пытаюсь прочитать изображение с URL: 

   public class question_insert {
public static String latex(String tex) throws IOException {

    String urltext = "http://chart.apis.google.com/chart?cht=tx&chl="+tex;

    URL url = new URL(urltext);
    BufferedReader in = new BufferedReader(new InputStreamReader(url
            .openStream()));
    String inputLine;

    while ((inputLine = in.readLine()) != null) {
        // Process each line.
        System.out.println(inputLine.toString());

    }
    in.close();

    return inputLine;}

Но я получаю нечитаемый код. URL дает только одно изображение, попробуйте это:

http://chart.apis.google.com/chart?cht=tx&chl=2+2%20\frac{3}{4}

Что мне нужно сделать, чтобы вставить изображение в HTML?

Ответы [ 4 ]

8 голосов
/ 21 февраля 2012

Прежде всего непонятно, что вы подразумеваете под изображением в формате HTML ?Вы могли бы Base64 кодировать его двоичные данные, но действительно ли это то, что вам нужно?

Как вы ожидаете выводить изображение PNG, возвращаемое вашим URL, в текстовую консоль (то есть System.out)?

Во-вторых, способ извлечения изображения не работает, даже если вы сохранили его на диске в виде файла PNG, поскольку Reader и его производные, такие как BufferedReader, используются для чтения символьных данных.,Из Reader API :

Абстрактный класс для чтения символьных потоков

Вам необходимо читать двоичные (байтовые) данные, поэтому вам нужно придерживаться BufferedInputStream

Подумав, я понял, что встраивание изображения в HTML - это то, что вам действительно нужно: 

public static void main(String[] args) throws Exception {
    String urltext = "http://chart.apis.google.com/chart?cht=tx&chl=2+2%20\\frac{3}{4}";
    URL url = new URL(urltext);
    BufferedInputStream bis = new BufferedInputStream(url.openStream());
    byte[] imageBytes = new byte[0];
    for(byte[] ba = new byte[bis.available()];
        bis.read(ba) != -1;) {
        byte[] baTmp = new byte[imageBytes.length + ba.length];
        System.arraycopy(imageBytes, 0, baTmp, 0, imageBytes.length);
        System.arraycopy(ba, 0, baTmp, imageBytes.length, ba.length);
        imageBytes = baTmp;
    }
    System.out.println("<img src='data:image/png;base64," + DatatypeConverter.printBase64Binary(imageBytes) + "'>");
}

Результат: 

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAhCAIAAACnV0fJAAAABmJLR0QA/wD/AP+gvaeTAAAC/klEQVRIiaWWv0vzQBjHr2ltsGDEyf+giAg5iIO4iiJC8cciQhaLk9IOGpcOii5ugj/qZoeWgqtFXJxrBSnUQTAianTJEJBcjeRCwr3D+caY1ijpd7rnc8lzz/PkuYdECCEgrDDGlmXF43GWZV0YC+0un8/f3993dXU9PT0JgpDL5T43SChdXV0JgnB5eUkIqVarPM+XSiW6xYQLkGEYlmVfXl4AAENDQwCAer3eUYyEENM06aJSqUAIq9UqNcN7JIQYhlGr1RYWFg4ODlwYMmuqer3++vra3d0ty7JlWZ1m7UrX9eHh4XQ67Y8RY9xsNh3H8QXSll9fX5fLZbrmOK6vr+/m5sYwDOD24+HhoaqqmqYpijI1NZXJZIL5xsaGqqqpVIrjOJpoJBL5ynpvb+/8/JzGTD/c/v5+ACeEZLPZ7e1tur67u+N5PpfLUTNimmYqlZqZmVleXqZnTExM2LZdqVTm5uZa+cXFRTQatSxra2vLMAyGYWRZhhBubm7G43EAANB1HUIIIdR1nR6STqd5nn9+fm7LXZMQYpomQshtTKoYx3Hr6+u0wDQWTdMSiUR/f39b7h0KLMt6zfbd8/j4KAhCNpv9I29VhHyfZouLi6qqnp6efhalHW82m/64/iuRSHybZsViESF0dHTkc+flCKGxsbGfPEqS9JX12dnZ0tISxtiXRStHP8u2beCWKZPJuK/t7Oy8v78H8AABQoiiKJIkaZpGz3l7exNFMYD/8mVs2xZFUZZlbzmSyWS5XG7LT05OWsuHMXbbKAYAmJ2d9T2RTCYDuE/FYrHRaOzu7n7av2YRLEVRRkdHvX3a0cQFABQKBd+16chjPp8fGRmJxb41dXiPDw8PCKHJyUkfD+nRcZzj4+O1tbXWrZAeS6XS9PS077JS+SfFX2QYxvz8/MDAADVrtVpvb+/g4KAoihDCkN3jvcvj4+MrKyv0UhNCQv5J9fT0eM1oNOqSjrqn0Wisrq7qun57eytJEsYYhKujK8dxPj4+XJOG+Q+Ygl+7nqaLKQAAAABJRU5ErkJggg=='>

Разве это не здорово?Все для вас!

5 голосов
/ 21 февраля 2012

Ну, я не знаю, хотите ли вы этого, потому что кажется, что никто этого не делает.Но если вы хотите получить этот вывод 

<img style="-webkit-user-select: none" 
src="http://chart.apis.google.com/chart?cht=tx&chl=2+2%20\frac{3}{4}" />

, вам придется использовать этот код 

public static String latex(String tex) {
    String url = "http://chart.apis.google.com/chart?cht=tx&chl=" + tex;
    return "<img style=\"-webkit-user-select: none\" src=\"" + url + "\"/>";
}

Также вам может понадобиться экранировать некоторые символы, такие как \ в texпараметр.

2 голосов
/ 21 февраля 2012

Чтобы получить ваше изображение, вы должны попробовать использовать ImageIO API следующим образом 

try {
    URL url = new URL(urltext);
    BufferedImage img = ImageIO.read(url);
} catch (IOException e) {
    e.printStackTrace();
}
0 голосов
/ 21 февраля 2012

http://chart.apis.google.com/chart?cht=tx&chl=2+2%20\frac{3}{4}

Обратите внимание, что этот URL неверный.Это показывает 22 3/4 вместо предполагаемого 2 + 2 3/4. Параметр запроса, содержащий специальные символы, должен быть закодирован в URL следующим образом.

http://chart.apis.google.com/chart?cht=tx&chl=2%2B2%20%5Cfrac%7B3%7D%7B4%7D

Youможно добиться этого с помощью URLEncoder#encode(). 

String chl = "2+2 \\frac{3}{4}";
String url = "http://chart.apis.google.com/chart?cht=tx&chl=" + URLEncoder.encode(chl, "UTF-8");

. Вернуться к вашему функциональному требованию:

Что мне нужно сделать, чтобы вставить изображение в HTML?

Если ваше единственное функциональное требование состоит в том, чтобы отображать изображение как доступное за указанным URL-адресом с помощью элемента HTML <img> на странице HTML / JSP, то вам необходимо использовать JSTL <c:url> тег для параметров запроса кодирования URL, содержащих специальные символы.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
...
<c:url var="url" value="http://chart.apis.google.com/chart">
    <c:param name="cht" value="tx" />
    <c:param name="chl" value="2+2 \\frac{3}{4}" />
</c:url>

Затем вы можете просто ссылаться на него как ${url} (как объявлено в атрибуте var <c:url>) в атрибуте src элемента HTML <img>: 

<img src="${url}" />

Чтение потока двоичных изображений из URL-адреса в виде потока символов и сохранение в строке при первоначальной попытке не имеет абсолютно никакого смысла.Вы также не открываете файлы изображений в блокноте, например.

...