java - 使用 thymeleaf 显示文本，就像在文本文件.txt 中显示的一样

Question

所以我将 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/>
&#13
&#10

我也尝试过编辑 CSS。每行的字符数量仍然不同。

Answer 1

好的，我已经弄清楚了。问题是我使用的字体不是等宽的。我将 CSS 属性更改为:

font-family: monospace;

然后我删除了 ASCII 选择中的空格字符，因为它没有被渲染，现在它按预期工作。