java - 使用 thymeleaf 显示文本,与在文本 file.txt 中显示的完全一样
问题描述
因此,我将 Spring 与 Thymeleaf 一起使用,并且我有一个 ASCII 生成器,它可以获取图像并将其转换为 ASCII 字符。字符是:
.,:ilwW#MW&8%B@$
转换后,我想使用 Thymeleaf 将图像显示到屏幕上。文本格式正确并变成了字符串。当我将该字符串写入 .txt 文件时,我得到了预期的输出,但是当我使用 Thymeleaf 执行此操作时,我得到了其他东西。我应该在每行上得到相同数量的字符,但 Thymeleaf 的情况并非如此,而是我得到了字符,但换行符似乎不起作用。我的代码:
import java.io.IOException;
import java.io.InputStream;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
import javax.imageio.ImageIO;
import ij.ImagePlus;
import ij.process.ImageProcessor;
public class ImageToAsciiConverter {
public static synchronized String convertImageToAscii(InputStream in) throws IOException {
ImagePlus image = new ImagePlus("Image", ImageIO.read(in));
return new ImageToAsciiConverter().process(image);
}
// Processes the image pixel by pixel and sets appropriate ASCII chars for every
// pixel value. Returns a string containing the ASCII picture.
private String process(ImagePlus image) {
ImageProcessor imageProcessor = image.getProcessor();
imageProcessor.setInterpolate(true);
ImagePlus imp = new ImagePlus("", imageProcessor.resize(300, 300));
int[] size = imp.getDimensions();
int width = size[0], height = size[1];
ImageToAsciiUtil util = new ImageToAsciiUtil();
return IntStream.range(0, width * height)
.parallel()
.map(i -> i % width != 0 ? util.convertToBrightness(imp.getPixel((i % width), (i / width))) : -1)
.mapToObj(i -> i == -1 ? "\n" : util.getAsciiSymbol(i))
.sequential()
.collect(Collectors.joining());
}
/**
* Utility class for converting images to ASCII characters.
*/
private static class ImageToAsciiUtil {
/**
* @param arr the array containing pixel RGB data.
* @return Returns the averaged RGB value. (( R + G + B ) / 3 )
*/
private int convertToBrightness(int[] arr) {
return ((arr[0] + arr[1] + arr[2]) / 3);
}
/**
* @param s the value to be changed
* @param a1 lower range of s.
* @param a2 upper range of s.
* @param b1 new lower range.
* @param b2 new upper range.
* @return Returns s with values ranging from b1 to b2.
*/
private float map(float s, float a1, float a2, float b1, float b2) {
return b1 + (s - a1) * (b2 - b1) / (a2 - a1);
}
/**
* .,:ilwW#MW&8%B@$
*
* @param brightness The pixel brightness that's going to be associated with a
* symbol.
* @return Returns the ASCII symbol associated with the provided brightness.
*/
private String getAsciiSymbol(int brightness) {
String ASCII = " .,:ilwW#MW&8%B@$";
String s = String.valueOf(ASCII.charAt((int) map(brightness, 0, 255, 0, ASCII.length() - 1)));
return s + s + s;
}
}
}
我试过了:
<p th:text="${ascii}"></p>
<p th:utext="${ascii}"></p>
而且我还尝试了不同的方法来发出 HTML 中的新行,例如:
<br/>



我也尝试过编辑 CSS。每行仍然有不同数量的字符。
解决方案
好的,所以我想通了。问题是我使用的字体不是等宽字体。我将 CSS 属性更改为:
font-family: monospace;
然后我删除了 ASCII 选项中的空格字符,因为它没有被渲染,现在它按预期工作。
推荐阅读
- f# - F#中教堂数字的减法
- python - Matplotlib Python 3 没有从非原点开始绘制箭头
- python - 如何在 tkinter 中使用文本图像作为按钮?
- python - 在 django 2 中找不到页面(404)
- angular - 分层店铺组织
- java - 无效的 Lambda 表达式
- react-native - 嵌套的水平滚动视图不起作用 - React Native
- javascript - role.setColor 不是 discord.js 上的函数
- python - 如何根据特定数量的字符比较字符串
- javascript - 当我单击 eventlistner 按钮时,我想刷新复选框