如何将背景图像添加到 vega/vegalite 画布并包含在导出 PNG 中答案

【问题标题】：How to add background image to vega/vegalite canvas and include in export PNG如何将背景图像添加到 vega/vegalite 画布并包含在导出 PNG 中
【发布时间】：2018-10-04 00:04:19
【问题描述】：

我有一个与Bob Baxley 在Is it possible to add a background image to a plot in vega or 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”操作只会给我原始图表而没有添加图像。那么如何正确添加水印/背景图像？

【问题讨论】：

标签： vega vega-lite

【解决方案1】：

PNG 输出仅处理 Vega/Vega-Lite 规范的内容，因此为了将图像包含在该输出中，该图像必须是规范的一部分。

不幸的是，从当前版本 (2.6) 开始，没有将图像包含在 Vega-Lite 规范中的机制。

但是，有一种机制可以通过 Image 标记将图像包含在 Vega 规范中；您可以在此处查看示例：https://vega.github.io/vega/docs/marks/image/ 您可以使用这种方法在 vega 图表中添加背景图像。

【讨论】：