Question

我有一个与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”操作只会给我原始图表，而没有添加图像。那么如何正确添加水印/背景图像？

Answer 1

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

不幸的是，从当前版本（2.6）开始，没有任何机制可以将图像包含在Vega-Lite规范中。

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

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

1 个答案: