Загрузка шрифта Google с помощью nodejs, конвертирование в реальном времени в base64 для использования в css datauri

Question

Конечная цель состоит в том, чтобы генерировать и обслуживать SVG, который включает все внешние элементы в виде datauris, чтобы полученное SVG можно было использовать на холсте html5 для генерации изображений на лету.

Мне удалось получить загрузку и встраивание изображений на лету на сервере, работающем в выводе svg, но svgs также включает в себя шрифты Google, которые пользователь может выбрать случайным образом, поэтому также необходимо загрузить указанный файл шрифта из Google, конвертировать это к base64, и поместите это в CSS svg как datauri в @ font-face.

Пока что шрифты просто отказываются работать.

Если я использую онлайн-сервис для преобразования того же файла шрифта и вставки его вместо моего преобразованного шрифта datauri, это работает, поэтому что-то не так с тем, как я загружаю шрифт, или как я конвертирую его в base64.,

Вся загрузка и преобразование происходит на сервере, поэтому я могу настроить сервер "все в одном". Я использую Облачные Функции Firebase, которые используют nodejs.

Я понял, что могу загрузить файл импорта шрифтов Google (например, https://fonts.googleapis.com/css?family=Comfortaa), который возвращает строку импорта css @font-face, например:

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4QIFqL_KWxWMT.woff2) format('woff2');
}

Затем я извлекаю URL фактического файла шрифта (то есть: https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4QIFqL_KWxWMT.woff2) и использую https nodejs, чтобы загрузить шрифт и вернуть его в качестве обещания.

function getFontToImport( file ) {
    return new Promise( ( resolve , reject ) => {
        https.get( file , ( res ) => {
            const { statusCode } = res;
            const contentType = res.headers['content-type'];
            let error;
            if (statusCode !== 200) {
                error = new Error('Request Failed.\n' + `Status Code: ${statusCode}`);
            }
            if ( error ) {
                // consume response data to free up memory
                res.resume();
                resolve( error ) ;
            }

            //res.setEncoding('utf8');
            let rawData = '';
            res.on('data', (chunk) => { rawData += chunk; });
            res.on('end', () => {
                try {
                    resolve( rawData ) ;
                } catch ( e ) {
                  console.log( 'Could not log the file' ) ;
                  console.error(e.message);
                  resolve( e.message ) ;
                }
            });
        }).on( 'error' , (e) => {
          console.error( 'Got error:' + e.message ) ;
          resolve( e.message ) ;    
        });    
    }) ;    
}

Затем я конвертирую эти данные в base64 позже, используя:

const base_64 = новый буфер ( rawData).toString( 'base64');

Я вставляю это в мой svg-код в @ font-face css, который я создаю, но шрифт не отображается. Если я преобразую тот же шрифт с помощью онлайн-конвертера в base64 и вставлю его вместо моих данных base64 в @ font-face, текст будет отображаться правильно, поэтому проблема связана с тем, как я загружаю и / или конвертирую шрифт

Когда я сравниваю версию шрифта, загруженного с помощью функции nodejs, с одним и тем же файлом, загруженным через мой браузер, они выглядят совершенно иначе.

Вот ссылка на страницу с использованием функций, над которыми я работаю, с несколькими различными выходами: https://us-central1-project-7161459789373699890.cloudfunctions.net/font64?font=Comfortaa

Я думаю, что проблема именно в том, как я загружаю шрифт. Я на самом деле не знаю узла, поэтому я просто скопировал пример, и он хорошо работал для изображений. Это не сработало для шрифта, поэтому я вынул кодировку, как было предложено, но все равно не повезло.

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

Answer 1

Должен установить кодировку "двоичный".

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