SVGを保存すると、背景イメージは除外されます

Question

私は現在、SVGで折れ線グラフを描くためにD3を使っています。私は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を保存するときは、最初にキャンバスにペイントしてください。