HTML Изображения холста с текстом различаются в разных операционных системах. - PullRequest
Новая
       9

HTML Изображения холста с текстом различаются в разных операционных системах.

0 голосов
/ 23 марта 2020

Я создаю небольшой класс JS, который содержит элемент <canvas> и использует его для динамического рисования некоторых изображений. В частности, эти изображения имеют как фон (заливка), так и текст.

После этого я хотел написать несколько модульных тестов, чтобы гарантировать, что при некотором вводе сгенерированный вывод (в виде строки base64) всегда одинаков. Это означает, что если я хочу создать изображение с розовым фоном и белым текстом, сгенерированный вывод всегда будет розовым изображением с белым текстом, и размеры будут одинаковыми. Другими словами, строки, закодированные в base64, равны.

Я могу запускать эти тесты локально, и они проходят (MacOS), но они не выполняются в моем задании интеграции Jenkins (работает на Linux). Это потому, что шрифт изображения немного отличается. Многое прочитав об этом, я подозреваю, что это потому, что шрифты реализованы по-разному в разных ОС.

См. Изображения:

Ожидается, получено локально в MacOS :

introducir la descripción de la imagen aquí

Фактически, получено в Linux:

introducir la descripción de la imagen aquí

Вы видите, что фактическое изображение, которое я получаю, немного выше ожидаемого (нижний отступ под текстом меньше). Текущий шрифт, который я использую: "44px Arial"

См. Код:

Реализация 

 generateImage(backgroundColor, fontColor = "#000000") {
        if (backgroundColor) {
            this.drawBackgroundWithColor(backgroundColor);
        }
        this.drawTexOverBackground("Text to draw", X_POSITION, Y_POSITION, fontColor, "44px Arial");
        return this.getCurrentCanvasAsBase64String();
    }

 drawBackgroundWithColor(backgroundColor){
        if (backgroundColor) {
            const context = this.getCanvasContext();
            context.save();
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, this.width, this.height);
            context.restore();
        }
    }

drawTexOverBackground(text, x, y, hexColor, font = this.font) {
        const context = this.getCanvasContext();
        context.save();
        context.font = font;
        context.textBaseline = "top";
        context.fillStyle = hexColor;
        context.fillText(text, x, y);
        context.restore();
    }

Модульный тест: 

it('should create a basic pink background with black text', () => {
        const backgroundGenerator = new ImageGenerator();
        const createdBackground = backgroundGenerator.generateImage("#FFC0CB");
        assert.equal(createdBackground, expectedTransparentImageWithText);
    });

Будучи expectedTransparentImageWithText глобальной переменной модуля, которая содержит ожидаемое значение строки base64, полученное в MacOS.

Я должен уточнить, что для В модульном тестировании я использую модуль canvas npm , который работает на узле и, как говорят в документации, он "реализует этот API как можно ближе" (ссылаясь на API браузера Canvas). Я подозреваю, что это причина, почему шрифты отличаются. Я также получил здесь и обнаружил, что шрифты ДЕЛАЮТСЯ в разных операционных системах , и между ними нет 100% -ной совместимости.

Есть ли какие-либо предложения, которые вы можете дать мне, чтобы лучше протестировать этот модуль и принять на счет шрифтов хорошо? Сейчас я тестирую только изображения без текста, поэтому я могу избежать описанного сценария, но, конечно, это не лучшая вещь.

...