Проблема с холстом с использованием vega с nodejs (только на стороне сервера)

Я уже несколько недель работаю над ботом Discord, который в основном собирает статистику на сервере и выводит шаблоны. Чтобы улучшить его, я хотел заставить его генерировать графики как PNG, чтобы отправлять их обратно пользователю - короче говоря, без DOM. Для этого я использую vega (версия 5.10.1 - последняя) и node-canvas (версия 2.6.1 - последняя) с nodejs v12.16.1.

Я рыскал по сети в поисках помощи по использованию веги и нашел пару противоречащих друг другу источников. Я использовал приведенный здесь пример кода: https://vega.github.io/vega/usage/

Дело в том, что я все время получаю эту ошибку:

TypeError: Cannot read property 'getContext' of null
message:"Cannot read property 'getContext' of null"
stack:"TypeError: Cannot read property 'getContext' of null
    at resize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3665:28)
    at CanvasRenderer.prototype$6.resize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3714:5)
    at CanvasRenderer.prototype$4.initialize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3294:17)
    at CanvasRenderer.prototype$6.initialize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3709:28)
    at initializeRenderer (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-view\build\vega-view.js:657:8)
    at renderHeadless (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-view\build\vega-view.js:780:12)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async View.renderToCanvas [as toCanvas] (e:\DEV\GIT REPOS\GITHUB\P...

Вот код, который вызывает у меня проблемы:

// Imports
const vega = require('vega');


// Render image from given graph spec (statsObject)
async function graphToImage (statsObject) {

    graphObject = new vega.View(vega.parse(statsObject), { renderer: 'none'});

    const pngName = generateFileName(10);

    removeExistingFile(pngName);

    graphObject.toCanvas().then(canvas => {

        console.log('Writing PNG to file...');
        writeFile(`../../../../generated/${pngName}.png`, canvas.toBuffer());

    }).catch(err => {

        console.log("Error writing PNG to file:");
        console.error(err);

    });


    return pngName;
}

Я действительно не знаю, как работают Canvas или Vega, поэтому я понятия не имею, что может вызывать эту проблему и как ее исправить ... Однако проблема, похоже, находится внутри метода toCanvas(). Любая помощь высоко ценится !

Заранее спасибо !


node.js server-side-rendering node-canvas vega
person Ruben N    schedule 20.04.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Изменить: мне удалось исправить мою проблему, и я публикую здесь ответ для будущего уведомления:

Мне удалось фактически сгенерировать графическое изображение путем рендеринга объекта View прямо в строку SVG, используя view.toSVG() вместо ошибочного view.toCanvas(), что отлично сработало.

Затем все, что оставалось сделать, это преобразовать полученную строку SVG в файл PNG, и все.

Вот обновленный рабочий код:

// Imports
const vega = require('vega');


// Render image from given graph object
async function graphToImage (statsObject) {

    // Generate a new 10-char hex string
    const pngName = generateHexStringName(10);


    // Remove any existing file with the same name in order to prevent confusion
    removeExistingFile(pngName);


    var view = new vega.View(vega.parse(statsObject), {renderer: 'none'});


    // Generate an SVG string
    view.toSVG().then(async function (svg) {

        // Working SVG string
        console.log(svg);

        // Process obtained SVG string, e. g. write it to PNG file


    }).catch(function(err) {

        console.error(err);

    });


    // Return the name of the generated PNG file
    return pngName;
}
person Ruben N    schedule 28.04.2020

arrow_upward

arrow_downward

person    schedule
comment
Спасибо за ответ ! Это то, к чему я пришел, но ваш код намного чище, чем мой ... - person Ruben N; 15.06.2020