我正在尝试将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不会。小提琴输出svg可以右键单击以导出为png。
这是我玩过的小提琴:https://jsfiddle.net/thatoneguy/bnLoq1Lw/9/
我已经调整了你的,所以你不必滚动来查看整个svg。还添加了:
>
而不是右键单击,只是一个左键单击事件。
单击时,保存到文件,但也保存到输出
div,以便您可以立即在屏幕上看到输出。
添加了内联样式,因此样式会出现在生成的输出中。
内联样式:
.style('stroke','red')
.style('fill','green')
现在当你改变比例时,一切似乎都很好?和以前一样,我甚至什么都看不见。
看看我展示的小提琴,让我知道它是否适合你