如何在单个html页面中将多个svg转换为png? [英] How to covert multiple svg to png in single html page?
问题描述
我使用d3和venn.js来创建此venn图.
I used d3 and venn.js for creating this venn diagram.
代码在这里:这些脚本实际上是在div venn2内部创建的svg.
The code goes here : Svg actually created inside div venn2 by these scripts.
<div id="venn2"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/venn.js"></script>
<script>
var sets = [
{sets:["A"], size: 12, label: "A"},
{sets:["B"], size:12, label: "B"},
{sets: ["A", "B"], size: 4, label: "AB"}
];
var chart = venn.VennDiagram()
.wrap(false)
.fontSize("14px")
.width(400)
.height(400);
function updateVenn(sets) {
var div = d3.select("#venn2").datum(sets);
var layout = chart(div),
textCentres = layout.textCentres;
div.selectAll(".label").style("fill", "white");
div.selectAll(".venn-circle path").style("fill-opacity", .6);
return layout;
}
</script>
我在此处获得的脚本可通过画布将svg转换为png.
The script I got here to convert svg to png via canvas.
<canvas id="canvas" ></canvas>
<div id="png-container" ></div>
<script>
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;
</script>
因此，通过脚本1在venn2 div中创建了svg形式的维恩图，然后通过脚本2将svg写为png.
每页一张svg图像效果很好.
当我在单个html页面上有多个这样的svg venn图时.只有第一个转换为png.
但是我无法获取位置2和3或更高的svg来转换为png.
我被这个代码困住了
So, the venn diagram as svg was created inside venn2 div by script 1 and svg then written as a png by script 2.
It worked perfectly fine for one svg image per page.
When I have more than one such svg venn diagrams on single html page. Only the first gets converted to png.
But I am unable to fetch the svg at position 2 and 3 or more to convert to png.
I am stuck at this code
var svgString = new XMLSerializer().serializeToString(querySelectorAll('svg'));
其中'svg'表示仅是我想的第一个svg，而不是以后的. 我什至无法创建带有不同"id"的svg，因为svg由d3和venn.js脚本组成.
where 'svg' means only first svg i guess but not later. I can't even create svgs with different "id" as svg is formed by d3 and venn.js scripts.
问题是:如何在html页面中转换所有svg图像 当我不知道通过上述代码将其ID转换为png图像时?
我不知道如何解析整个字符串var svgString以将所有字符串转换为不同的png图像?
The question is that : How to convert all svg images in a html page when I don't know their id to png images via above code?
I do not know how to parse this whole stringvar svgStringto convert all to different png images?
推荐答案
如果其他人正在寻找示例代码，我会按照以下方式弄清楚.
In case someone else comes looking for sample code, I figured it out as follows.
我的情况:我有一个svg，其中有两层是由plotly绘制的.我只是得到像OP这样的第一层.密谋加入了一个id ="chart"的元素.已经使用id ="layer0"创建了一个新画布.
My case: I had an svg with two layers drawn by plotly. I was only getting the first layer like the OP. Plotly drew into an element with id="chart". A new canvas already created with id="layer0".
最终，我需要以dataURL的形式发送回PHP，因此:
Eventually I needed to send back to PHP as a dataURL so:
var nodes = document.getElementById("chart").querySelectorAll('svg');
for (var i = 0; i < nodes.length; i++) {
result = new XMLSerializer().serializeToString(nodes[i]);
eval('layer'+[i]+'chart').src = 'data:image/svg+xml;base64,' + btoa(result);
}
elem0 = document.getElementById("layer0");
ctx0 = elem0.getContext("2d");
layer0chart.onload = function() {
ctx0.drawImage(layer0chart,0,0,w*1.5,h*1.5);
ctx0.drawImage(layer1chart,0,0,w*1.5,h*1.5);
canvasdata = elem0.toDataURL();
console.log(canvasdata);
}
我感谢@BioDeveloper和@RobertLongson的帮助.最终，对我来说，关键是还要确保在加载图像时调用了toDataURL.干杯.
I appreciate the help from @BioDeveloper and @RobertLongson. The key for me ultimately was to also make sure the toDataURL was being called as an image was being loaded. Cheers.
这篇关于如何在单个html页面中将多个svg转换为png?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
