展平多个 SVG 图层并保存/导出？答案

【问题标题】：Flatten multiple SVG layers and save/export?展平多个 SVG 图层并保存/导出？
【发布时间】：2020-12-04 09:21:26
【问题描述】：

我使用许多 SVG（所有相同的宽度/高度，位置：绝对）创建了一个头像/角色制作器，按 z-index 排列并使用滑块进行选择。

它运行良好，但我的目标是现在将所选 SVG 的扁平版本保存为 PNG 以保存/导出。我一直在研究画布标签，但请阅读我需要使用多个画布标签作为图层，听起来我会回到原点。

谁能指出我正确的方向？为了清楚起见，我已经发布了我当前代码的 sn-p。

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>

谢谢

【问题讨论】：

您只需要一张画布。使用canvas,width 和height 属性（不是CSS 值）设置其分辨率，并在一个画布上使用2D 上下文drawImage(SVGImage, x, y); 从下到上依次绘制SVG 图像。然后，您可以保存为单个 PNG 或 JPG。 developer.mozilla.org/en-US/docs/Web/API/… 上有关 2D 渲染上下文的信息和更多信息

标签： javascript svg canvas

【解决方案1】：

好的，我侥幸完成了一个修复，它可以工作...

由于图像由范围滑块控制，我将其转换为表单，并在提交时使用 POST 将值推送到具有画布元素的另一个页面。我将表单值定义为变量，并使用 PHP 动态插入它们以绘制具有相应数字文件名的平面图像，现在我可以根据需要使用。

但是，如果有人有更性感的解决方案，请随时分享。谢谢。

【讨论】：

【解决方案2】：

你可以试试dom to image库或者html2canvas

这是他们尊敬的网站https://html2canvas.hertzen.com/上的 html2canvas 示例

【讨论】：