保存 SVG，背景图像被忽略

Question

我目前正在使用 D3 在 svg 上绘制折线图。 我想保存 svg，效果很好。 折线图被保存，但我添加的背景图像被排除在外。 我只是得到一个纯色背景。

这是一个关于如何添加背景以及如何保存 svg 的简短示例。 这是一个简化的例子，没有折线图和网上找到的图像。 最初背景图像是从 Web 服务器上的文件夹加载的。 然而，结果是一样的。 我保存时没有背景图像。 这不涉及css。

http://jsfiddle.net/uphytob3/3/

这是它的脚本部分。

$("button.save_button").click(function() {

    if ($(this).attr("value") == "export_image") {
    save_svg();
  }
});

var canvas = d3.select("#container")
    .append("svg")
        .attr("height", 440)
        .attr("width", 503);

canvas.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "#FAFAFA");

canvas.append("image")
    .attr("xlink:href", "https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAANNAAAAJDU2MmE4ODEwLTQ1YTAtNGFjNi1iNmM5LTY4NGFiN2I0NmI5Yg.png")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 503)
    .attr("height", 440)
    .attr("opacity", 0.5);

function save_svg() {
    var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);

    var canvas = document.createElement("canvas");
    canvas.height = 700;
    canvas.width = 1400;

    var context = canvas.getContext("2d");

    var image = new Image;
    image.src = imgsrc;
    image.onload = function() {
        context.drawImage(image, 0, 0);

        var canvasdata = canvas.toDataURL("image/png");

        var a = document.createElement("a");
        a.download = "test.png";
        a.href = canvasdata;
        a.click();
    };
}

我在保存 svg 时测试了再次添加图像，但这不起作用，因为它要么隐藏在折线图后面，因为折线图不透明，或者它位于折线图的顶部，隐藏了部分其中。

这是一个修改过的 save_svg() 函数。

function save_svg() {
    var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);

    var canvas = document.createElement("canvas");
    canvas.height = 700;
    canvas.width = 1400;

    var context = canvas.getContext("2d");

    var image = new Image;
    image.src = imgsrc;

    var bg = new Image;
    bg.src = "https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAANNAAAAJDU2MmE4ODEwLTQ1YTAtNGFjNi1iNmM5LTY4NGFiN2I0NmI5Yg.png";

    image.onload = function() {
        context.drawImage(image, 0, 0);
        context.drawImage(bg, 0, 0); 

        var canvasdata = canvas.toDataURL("image/png");

        var a = document.createElement("a");
        a.download = "test.png";
        a.href = canvasdata;
        a.click();
    };

关于如何在保存的图像中获取背景图像的任何想法？

Answer 1

你的问题不清楚。 您谈论“无背景”，但是当我尝试您的代码时，我得到一个带有灰色 (#fafafa) 背景的 PNG。

所以也许您实际上是在谈论您添加到顶部的图片？ 来自 media.licdn.com 的那个？

您没有在保存的 PNG 文件中获取该图片的原因是浏览器中的隐私限制。 作为图像加载的 SVG必须是自包含的。 它们不能引用第三方对象。

您将 SVG 作为图像加载，方法是将其作为 DataURI 加载到new Image 。 以这种方式加载 SVG 意味着由<image>链接的外部文件将被忽略。

您可以解决此问题的方法是：

1. 将您的第三方图像转换为数据 URI，并以这种方式将其包含在 SVG 中。 通过这样做，它不再是外部资源。

2. 保存 SVG 时，请先将其绘制到画布上。