如何在 Thymeleaf 中显示 BufferedImage

Question

我目前正在尝试通过为流行的纸牌游戏 Magic the Gathering 编写一个简单的桌面模拟器来自学 Spring Boot。 所以我首先要做的是从 Scryfall API 中检索卡片图像并将它们显示在 Thymeleaf 中。 我知道如何为 static 图像执行此操作，但我似乎无法找到一种方法来显示动态检索的图像。 我目前的解决方法是为 Thymeleaf 提供 Scryfall URI，但我真正想做的是在 Thymeleaf 中显示一个 BufferedImage。 所以这是我当前的 controller 代码。

package mtg;

import java.util.Map;

import org.springframework.boot.json.BasicJsonParser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

@Controller
@RequestMapping("/sample")
public class SampleCardController {

@ModelAttribute
public void addCardToModel(Model model) {
    RestTemplate rest = new RestTemplate();
    String jsonString = rest.getForObject(
            "https://api.scryfall.com/cards/random", String.class);
    BasicJsonParser parser = new BasicJsonParser();
    Map<String, Object> map = parser.parseMap(jsonString);
    String name = (String) map.get("name");
    String uri = (String) map.get("uri");
    model.addAttribute("cardName", name);
    model.addAttribute("imageURI", uri + "?format=image");
}

@GetMapping
public String showSampleCard() {
    return "sample";
}
}

这是 Thymeleaf 模板sample.html ：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Sample</title>
  </head>
  <body>
    <h1>Here's a sample card!</h1>
    <h3 th:text="${cardName}"></h3>
    <img th:src="${imageURI}"/>
  </body>
</html>

我真正想在 controller 中做的事情是这样的：

package mtg;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Map;

import javax.imageio.ImageIO;

import org.springframework.boot.json.BasicJsonParser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

@Controller
@RequestMapping("/sample")
public class SampleCardController2 {

    @ModelAttribute
    public void addCardToModel(Model model) {
        RestTemplate rest = new RestTemplate();
        String jsonString = rest.getForObject(
                "https://api.scryfall.com/cards/random", String.class);
        BasicJsonParser parser = new BasicJsonParser();
        Map<String, Object> map = parser.parseMap(jsonString);
        String name = (String) map.get("name");
        String imageURI = (String) map.get("uri");
        BufferedImage image = null;
        try {
            image = ImageIO.read(new URL(imageURI + "?format=image"));
        } catch (MalformedURLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        model.addAttribute("cardName", name);
        model.addAttribute("image", image);
    }

    @GetMapping
    public String showSampleCard() {
        return "sample";
    }

}

但我不知道如何让 Thymeleaf 显示图像。 似乎对于img标签`你只能提供一个需要 URL 的th:src属性。 对于可以使用 model 属性名称的图像，是否有类似于th:text="${cardName}"的内容？

Answer 1

您可以在img标签中插入不止一个 URL。 在这种情况下，您可以通过执行以下操作插入正在加载的图像的 base64 表示：

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

从您的代码中，从 BefferedImage object 中获取 base64，如下所示：

public static String imgToBase64String(final RenderedImage img, final String formatName)
{
  final ByteArrayOutputStream os = new ByteArrayOutputStream();

  try
  {
    ImageIO.write(img, formatName, os);
    return Base64.getEncoder().encodeToString(os.toByteArray());
  }
  catch (final IOException ioe)
  {
    throw new UncheckedIOException(ioe);
  }
}

并将其传递给视图。

链接IMG 标签 base64 src

缓冲图像到 base64

如何在 Thymeleaf 中显示 BufferedImage

问题描述

1 个解决方案

解决方案1
0 2022-09-22 10:50:58

如何在 Thymeleaf 中显示 BufferedImage

问题描述

1 个解决方案

解决方案1 0 2022-09-22 10:50:58

解决方案1
0 2022-09-22 10:50:58