保存一個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文件中獲取該圖片的原因是因爲瀏覽器中的隱私限制。作爲圖像加載的SVGs 必須自包含。他們不能提及第三方對象。

您正在將SVG作爲圖像加載到DataURI中加載到new Image中。以這種方式加載SVG意味着忽略由<image>鏈接的外部文件。

方法可以解決，這將是：

1. 轉換您的第三方圖像數據URI，並將其納入了SVG的方式。通過這樣做，它不再是外部資源。

2. 保存SVG時，首先將其繪製到畫布上。