Javascript 展平多个SVG层并保存/导出？
我已经用许多SVG创建了一个化身/角色生成器，所有SVG都具有相同的宽度/高度，位置：绝对，按z索引排列，并使用滑块进行选择 它工作得很好，但我的目标是现在将选定SVG的展开版本保存为PNG以保存/导出。我一直在研究画布标记，但阅读时我需要使用多个画布标记作为层，这听起来像是回到了原点 谁能给我指出正确的方向吗？为了清晰起见，我发布了一段当前代码 不熟悉JS和SVG，也没有画布方面的经验，因此任何建议都将不胜感激Javascript 展平多个SVG层并保存/导出？,javascript,svg,canvas,Javascript,Svg,Canvas,我已经用许多SVG创建了一个化身/角色生成器，所有SVG都具有相同的宽度/高度，位置：绝对，按z索引排列，并使用滑块进行选择 它工作得很好，但我的目标是现在将选定SVG的展开版本保存为PNG以保存/导出。我一直在研究画布标记，但阅读时我需要使用多个画布标记作为层，这听起来像是回到了原点 谁能给我指出正确的方向吗？为了清晰起见，我发布了一段当前代码 不熟悉JS和SVG，也没有画布方面的经验，因此任何建议都将不胜感激 <body> <div class=&q
<body>
<div class="image eyes" id="eyesImages">
<img src="parts/eyes/01.svg">
<img src="parts/eyes/02.svg">
<img src="parts/eyes/03.svg">
</div>
<div class="image nose" id="noseImages">
<img src="parts/nose/01.svg">
<img src="parts/nose/02.svg">
<img src="parts/nose/03.svg">
</div>
<div class="image mouth" id="mouthImages">
<img src="parts/mouth/01.svg">
<img src="parts/mouth/02.svg">
<img src="parts/mouth/03.svg">
</div>
<div class="sliders">
<div id="slider1">
<label for="slider1">Eyes</label>
<input type="range" min="1" max="50" value="1" class="slider" id="sliderEyes">
</div>
<div id="slider2">
<label for="slider2">Nose</label>
<input type="range" min="1" max="50" value="1" class="slider" id="sliderNose">
</div>
<div id="slider3">
<label for="slider3">Mouth</label>
<input type="range" min="1" max="50" value="1" class="slider" id="sliderMouth">
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', function() {
var slider1 = document.getElementById("sliderEyes");
var images = document.getElementById("eyesImages");
slider1.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
window.addEventListener('load', function() {
var slider2 = document.getElementById("sliderNose");
var images = document.getElementById("noseImages");
slider2.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
window.addEventListener('load', function() {
var slider3 = document.getElementById("sliderMouth");
var images = document.getElementById("mouthImages");
slider3.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
</script>
</body>
这是一个html2canvas在他们尊敬的webiste上的示例好的，我侥幸得到了一个修复，它可以工作 由于图像是由范围滑块控制的，所以我将其转换为一个表单，并使用POST on submit将值推送到另一个带有画布元素的页面。我将表单值定义为变量，并使用PHP动态插入它们，以绘制带有相应数字文件名的平面图像，现在可以根据需要使用这些文件名
不过，如果有人有更性感的解决方案，请随时分享。谢谢。您只需要一块画布。使用画布、宽度和高度属性（而不是CSS值）设置其分辨率，并使用2D上下文DrawImagesGimage，x，y从下到上依次绘制SVG图像；在一张画布上。然后可以另存为单个PNG或JPG。有关二维渲染上下文和更多信息，请访问