Как добавить фоновое изображение на холст vega / vegalite и включить в экспорт PNG - PullRequest
Новая
       8

Как добавить фоновое изображение на холст vega / vegalite и включить в экспорт PNG

0 голосов
/ 04 октября 2018

У меня такой же вопрос, как у Боб Бэксли в Возможно ли добавить фоновое изображение к сюжету в vega или vega-lite?

Добавлениеизображение с использованием CSS не включает его в фактический холст.Хотя он выглядит хорошо, он не будет экспортирован с помощью действия «экспорт как PNG».Попытка использования .drawImage() на холсте работает до такой степени, что изображение затем отображается, однако экспорт PNG по-прежнему не внедряет изображение.

Подход, который я использовал: 

    // GET THE IMAGE.
    var img = new Image();
    img.src = 'img/myimage.png';

    // WAIT TILL IMAGE IS LOADED.
    img.onload = function () {
        fill_canvas(img); 
    }
    function fill_canvas(img) {
        var canvas = document.getElementsByTagName()[0];
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
    }
}

Результаты выглядят хорошо, но использование действия «Экспорт в PNG» дает мне только исходный график без добавленного изображения.Так как я могу правильно добавить водяной знак / фоновое изображение?

1 Ответ

0 голосов
/ 04 октября 2018

Выход PNG обрабатывает только содержимое спецификации Vega / Vega-Lite, поэтому для включения изображения в этот вывод изображение должно быть частью спецификации.

К сожалению,отсутствует механизм включения изображений в спецификации Vega-Lite, начиная с текущей версии (2.6).

Существует, однако, механизм включения изображений в спецификацию Vega через метку Image;Вы можете увидеть пример здесь: https://vega.github.io/vega/docs/marks/image/ Вы можете использовать этот подход, чтобы добавить фоновое изображение в Vega Chart.

...