如何解决展平多个SVG层并保存/导出?
我已经使用许多SVG(宽度/高度相同,位置:绝对)创建了化身/角色制作工具,并按z-index排列并使用滑块进行了选择。
效果很好,但是我的目标是现在将选定的SVG的拼合版本另存为PNG以保存/导出。我一直在研究canvas标签,但是读到我需要将多个canvas标签用作图层,听起来我将回到第一个正方形。
有人能指出我正确的方向吗?为了清楚起见,我发布了当前代码的一小段。
JS和SVG的新手,并且没有使用画布的经验,因此任何建议将不胜感激。
<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>
谢谢
解决方法
好吧,我骗了一个补丁,它起作用了...
由于图像是由范围滑块控制的,因此我将其转换为表单,并使用POST在使用canvas元素提交到另一页时使用POST推送了值。我将表单值定义为变量,并使用PHP将其动态插入,以绘制带有相应数字文件名的平面图像,现在可以根据需要使用它。
但是,如果有人有更性感的解决方案,请随时分享。谢谢。
,您可以尝试dom to image库或html2canvas
这是他们敬意的网站https://html2canvas.hertzen.com/上的html2canvas的示例
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。