1

svg を png に変換しようとしていますが、変換された画像が svg と同じではないことがわかりました。svgとpngの両方の一貫性をどのように保証できますか?

svg を png に変換するコード

    jQuery('#imgDiv').css({display: 'block', 'padding-left': '25px', overflow: 'scroll'});
    jQuery('#resImg').css({display: 'block', 'padding-left': '25px'});
    var svg = jQuery('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
    // strips off all spaces between tags

    canvg('cvs', svg, {
        ignoreMouse: true,
        ignoreAnimation: true
    });
    var canvas = document.getElementById('cvs');

    img = canvas.toDataURL("image/png", 1);
    var a = document.createElement('a');
    a.href = img;
    a.download = "image.png";
    var clickEvent = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": false
    });
    a.dispatchEvent(clickEvent)

すべてがファイルですが、ダウンロードした画像を見ると、高さ、幅が異なり、ラベルとフォントが表示されません。

svg を生成するコード:

var width = 1260,
        height = 910;
var svg = d3.select("#map")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .on("contextmenu", function (d, i) {
                d3.event.preventDefault();
                printMap();
            });

    svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height)
            .style("stroke", '#000000')
            .style("stroke-opacity", 1)
            .style("fill", "#FFF")
            .style("fill-opacity", 0)
            .style("stroke-width", 2);

var cluster = topojson.feature(data, data.objects.clustergeojson).features;
        var projection = d3.geo.mercator();
        s = 250;

        projection.scale(8500)
                .center([83, 29.5]);

        var path = d3.geo.path().projection(projection);

        var b = path.bounds(cluster),
                s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

実際の SVG:

ここに画像の説明を入力

変換された PNG:

ここに画像の説明を入力

これがサンプルjsFiddleです。

var projection = d3.geo.mercator()
  .scale(5000)
  .center([83.96, 28.27]);

スケールを 5000 から 6000 に変更すると、svg は大きくなりますが、png は大きくなりません。fiddle 出力 svg を右クリックして、png としてエクスポートできます。

4

1 に答える 1

1

これが私が遊んだフィドルです: https://jsfiddle.net/thatoneguy/bnLoq1Lw/9/

私はあなたのものを調整したので、svg全体を見るためにスクロールする必要はありません. また追加:

  • 右クリックの代わりに、左クリックイベントのみ。

  • クリックすると、ファイルに保存されるだけでなく、outputdiv にも保存されるため、画面上で出力をすぐに確認できます。

  • インライン スタイリングを追加して、スタイリングが生成された出力に表示されるようにしました。

インライン スタイリング :

.style('stroke','red')
.style('fill','green')

スケールを変更すると、すべて正常に動作するように見えますか? 以前と同じように、何も見えませんでした。

私が示したフィドルを見て、それがうまくいくかどうか教えてください

于 2016-03-22T11:06:45.600 に答える