0

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

4

1 回答 1

0

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

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

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

于 2018-10-04T15:48:25.390 回答