使用 thymeleaf 显示文本，与在文本 file.txt 中显示的完全一样

Question

因此，我将 Spring 与 Thymeleaf 一起使用，并且我有一个 ASCII 生成器，它可以获取图像并将其转换为 ASCII 字符。 字符是：

 .,:ilwW#MW&8%B@$

转换后，我想使用 Thymeleaf 将图像显示到屏幕上。 文本格式正确并变成了字符串。 当我将该字符串写入 a.txt 文件时，我得到了预期的 output，但是当我使用 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 选项中的空格字符，因为它没有被渲染，现在它按预期工作。