Блог

Главная - Вопросы по программированию - Сгладить несколько слоев SVG и сохранить / экспортировать?

Сгладить несколько слоев SVG и сохранить / экспортировать?

#javascript #svg #canvas

#javascript #svg #холст

Вопрос:

Я создал аватар / создателя персонажей, используя множество SVG-файлов (все одинаковой ширины / высоты, положение: абсолютное), упорядоченных по z-индексу и выбранных с помощью ползунков.

Это работает хорошо, но теперь моя цель — сохранить сглаженную версию выбранных SVG-файлов в формате PNG для сохранения / экспорта. Я изучал теги canvas, но прочитал, что мне нужно будет использовать несколько тегов canvas в качестве слоев, что звучит так, будто я вернусь к исходной точке.

Кто-нибудь может указать мне правильное направление? Я опубликовал фрагмент моего текущего кода для наглядности.

Новичок в JS и SVG и не имеет опыта работы с canvas, поэтому буду признателен за любой совет.

     <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>

Спасибо

Комментарии:

1. Вам нужен только один холст. Установите его разрешение с помощью canvas,width и height свойств (не значений CSS) и рисуйте SVG-изображения по очереди снизу вверх, используя 2D контекст drawImage(SVGImage, x, y); на одном холсте. Затем вы можете сохранить в виде одного PNG или JPG. информация о контексте 2D-рендеринга и многое другое на developer.mozilla.org/en-US/docs/Web/API /…

Ответ №1:

Хорошо, я случайно исправил, и это работает…

Поскольку изображения управляются ползунками диапазона, я превратил их в форму и перенес значения с помощью POST на submit на другую страницу с элементом canvas. Я определил значения формы как переменные и вставил их динамически с помощью PHP, чтобы нарисовать плоское изображение с соответствующими числовыми именами файлов, с которыми теперь я могу играть по мере необходимости.

Однако, если у кого-нибудь есть более сексуальное решение, пожалуйста, не стесняйтесь поделиться. Спасибо.

Ответ №2:

Вы можете попробовать dom в библиотеку изображений или html2canvas

Вот пример html2canvas на их уважительном веб-сайте https://html2canvas.hertzen.com