1

PNG画像をデータuriに変換し、このデータuriをhtml要素に挿入することに成功しました。

//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    $("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
    // data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})

これにより、データ uri が正しいことが証明されます。

しかし、何らかの理由で、クライアント側の dataviz で d3js を使用する方法を見つけることができなかったため、データ URI に期待どおりのラスター イメージが表示されてしまいました。動作を妨げるものがあります。

//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    var width = 500, height = width/2;
    var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
        svg.attr(':xmlns','http://www.w3.org/2000/svg') 
           .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
    var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})

ネイティブの d3js xmlns 名前空間で競合が発生していると思われますか、それとも入力ミスですか? 私のフィドルhttp://jsfiddle.net/xGUsu/106/があります。何か案が ？

( 「なぜ base64 でエンコードされた png が svg 内に表示されないのですか? JS: データ URI 埋め込みのために image.png を base64 コードにエンコードする方法」に関連)

4

1 に答える 1

6

2つの間違い:

これらの行は不要であり、エラーの原因になります (コンソールを参照してください)。

    svg.attr(':xmlns','http://www.w3.org/2000/svg') 
       .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');

(しかも:先頭の は明らかに間違っています。XML ではxmlnsa なしで記述されています):

次に、要素に高さを設定するのを忘れました<image>:

var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr("height", height ) 
        .attr("xlink:href", "data:image/png;base64," + data);

働くフィドル

于 2015-03-01T00:10:02.853 に答える