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

Posted 2023-03-05

【中文标题】在java中将图像嵌入到HTML中？

【英文标题】：Embedding image into HTML in java?

【发布时间】：2012-03-11 19:48:39

【问题描述】：

我有这段代码，我试图从 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\frac34

如何将图片嵌入到 html 中？

【问题讨论】：

HTML格式的代码和图片不可读是什么意思？您从页面获取的数据是 PNG 文件 - 请保存它。

我想把 从 url 保存到一个字符串中。

你希望你的结果是什么样子的？

【参考方案1】：

首先不清楚您所说的 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\\frac34";
    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=='>

这不是很好吗？什么都给你！

【讨论】：

我是新手，我只是想从 url chart.apis.google.com/chart?cht=tx&chl=2+2%20\frac34 "> 我这里没有显示图片。

@Navdroid 但是您希望阅读什么内容？文本？你得到一个图像 - 二进制数据。难怪它不可读。

我想要的只是将 存储在从 url 读取的字符串中

@Navdroid 我不明白。 <img /> 只是一个 HTML 标签。你得到的是图像的二进制表示。请准确解释您想要实现的目标。你想存储什么，你想存储在哪里？

【参考方案2】：

要获取您的图像，您应该尝试像这样使用 ImageIO API

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

【讨论】：

当然这是一个不错的答案，但是如何使用 html 显示此图像？我的意思是 格式

@Navdroid 你能用人类的语言告诉我们你想要达到的结果是什么吗？ 格式是什么？

我们正在讨论生成带有嵌入 base64 源类型的 HTML 标签 。我不确定我们是否可以使用 BufferedImage 来做到这一点，尤其是因为我们无法在此处访问内部 byte[]

【参考方案3】：

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

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

您必须使用此代码

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 参数中转义一些字符，例如\。

【参考方案4】：

http://chart.apis.google.com/chart?cht=tx&chl=2+2%20\frac34

请注意，此网址是错误的。这显示了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 \\frac34";
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 \\frac34" />
</c:url>

然后您可以在 HTML <img> 元素的 src 属性中将其称为 $url（在 <c:url> 的 var 属性中声明）：

<img src="$url" />

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