Как сделать скриншот для блока с элементами svg на сайте? - PullRequest
Новая
       42

Как сделать скриншот для блока с элементами svg на сайте?

1 голос
/ 05 апреля 2019

Я создал конструктор на сайте, суть которого в том, что он добавляет выбранные элементы и их цвета (элементы в svg) к фону и цвету фона, выбранному посетителем (фон в png), а затем вы должны нажать на кнопку «сохранить результат» и выполнить только снимок экрана рабочей области. Я написал этот скрипт, НО он снимает скриншот, но только фон, и игнорирует выбранный и установленный svg (их нет на скриншоте - только фон), у меня есть некоторые идеи почему, но я не знаю, как исправить Это. Скриншот элемента и какой скрипт мне даст в результате я оставлю на imgur. Заранее спасибо)))

https://imgur.com/a/zAkg6az

JavaScript необходим для создания скриншота, сделанного в файле .html, и выброски его сюда. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
<title>Fence</title>
</head>
<body>
<div class="main-block">
    <div id="input-block">
       <label>Задайте высоту панели <input type="number"  placeholder="100"> см</label>
    </div>
    <div id="fence-container">
               <div class="half-container" index="10">
                <div class="hint" style="top: 45px; bottom: 45px; height: auto;" >
                    Выбор цвета
                </div>
               <div class="strap-block"  index="0" style="left: 0px; top: -43px">
                   <div class="strap-item">
                   </div>
                   <div class="hint" >
                       Выбор планки и цвета
                   </div>
               </div>
                <div class="strap-block"  index="1" style="left: 0px; top: 0px">
                    <div class="strap-item">
                    </div>
                    <div class="hint" >
                        Выбор планки и цвета
                    </div>

                </div>
                <div class="strap-block"  index="2" style="left: 0px; bottom: 0px">
                    <div class="strap-item">
                    </div>
                    <div class="hint" >
                        Выбор планки и цвета
                    </div>

                </div>

        </div>
            <div class="half-container" index="11">
                <div class="strap-block"  index="3" style="left: 0px; top: 0">
                    <div class="strap-item">
                    </div>
                    <div class="hint" >
                        Выбор планки и цвета
                    </div>

                </div>
                <div class="strap-block"  index="4" style="left: 0; bottom: 0px">
                    <div class="strap-item">
                    </div>
                    <div class="hint" >
                        Выбор планки и цвета
                    </div>
                </div>




                <div class="hint" style="top: 45px; bottom: 45px; height: auto;" >
                    Выбор цвета
                </div>
            </div>
            <button type="button" onclick="a()">Сохраните свой результат!</button>
</div>
<script type="text/javascript" src="index.js"></script>
 <script>
    function a(){
        html2canvas(document.querySelector(".fence-container")).then(canvas => {
    document.body.appendChild(canvas)
});
    }

 </script>
</body>
</html>

1 Ответ

0 голосов
/ 06 апреля 2019

Надеюсь, это поможет, но у этого метода есть 2 ограничения:

  1. Требуется пространство имен xmlns="http://www.w3.org/2000/svg" или изображение не загружается

  2. Стили должны быть внутри svg или не должны применяться 

document.querySelector('button').onclick = function () {
  var data = document.querySelector('div#svg').innerHTML;
  var img = new Image();
  img.src = 'data:image/svg+xml;base64,' + btoa(data);
  img.onload = function() {
    document.querySelector('canvas#copy')
            .getContext('2d')
            .drawImage(img, 0, 0);
  }
}
div, body, svg {
  margin: 0;
  display: inline-block;
}
<div id="svg">
  <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" stroke-width="2.2" transform="translate(75,75)">
    <circle r="10" stroke="hsl(10,75%,75%)"/>
    <circle r="15" stroke="hsl(10,75%,75%)"/>
    <circle r="20" stroke="hsl(40,75%,75%)"/>
    <circle r="25" stroke="hsl(70,75%,75%)"/>
    <circle r="30" stroke="hsl(100,75%,75%)"/>
    <circle r="35" stroke="hsl(130,75%,75%)"/>
    <circle r="40" stroke="hsl(160,75%,75%)"/>
    <circle r="45" stroke="hsl(190,75%,75%)"/>
    </g>
  </svg>
</div>

<div>
  <button>>></button>
</div>

<canvas width="150" height="150" id="copy"></canvas>

PS: Извините за мой английский

...