在java中将图像嵌入到HTML中?

时间:2012-02-21 13:41:54

标签: java html image embedded-resource

我有这段代码,我正在尝试从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;}

但我得到的是无法读取的代码。网址只提供一张图片试试这个:

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

我该怎么做才能将图像嵌入到Html中?

4 个答案:

答案 0 :(得分:8)

首先,您不清楚Html格式的图像是什么意思?您可以 Base64 对其二进制数据进行编码,但这是您真正想要的吗?

您希望如何将URL返回的PNG图片输出到文本控制台(即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=='>

那不是很好吗?什么都适合你!

答案 1 :(得分:5)

嗯,我不知道这是不是你想要的,因为似乎没有人这样做。但是如果你想得到这个输出

<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 :(得分:2)

要获取图像,您应该尝试使用像此一样的ImageIO API

try {
    URL url = new URL(urltext);
    BufferedImage img = ImageIO.read(url);
} catch (IOException e) {
    e.printStackTrace();
}

答案 3 :(得分:0)

  

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

请注意,此网址错误。这显示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

您可以使用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中?

如果您唯一的功能要求是通过HTML / JSP页面中的HTML <img>元素在提及的URL后面显示图像,那么您需要使用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>

然后,您可以在HTML ${url}元素的var属性中将其引用为<c:url>(在src的{​​{1}}属性中声明):

<img>

从URL读取二进制图像流作为字符流并在最初尝试时存储在字符串中完全没有意义。例如,您也不会在记事本中打开图像文件。