Отображение текста с помощью тимелеафа точно так же, как в текстовом файле .txt - PullRequest
Новая
       118

Отображение текста с помощью тимелеафа точно так же, как в текстовом файле .txt

0 голосов
/ 27 мая 2020

Итак, я использую 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. По-прежнему разное количество символов в каждой строке.

1 Ответ

0 голосов
/ 27 мая 2020

Хорошо, вот и разобрался. Проблема заключалась в том, что я использовал не моноширинный шрифт. Я изменил свойство CSS на: 

font-family: monospace;

, а затем удалил пробел в вариантах ASCII, потому что он не отображался и теперь работает должным образом.

...