How to make screenshot for block with svg elements on the site?

问题

I created a constructor on the site whose essence is that it adds the selected elements and their colors (elements in svg) to the background and background color chosen by the visitor (the background in png), and then you must click on the "save result" button and execute screenshot of the workspace only. I wrote this script, BUT it takes a screenshot, but only the background, and ignores selected and installed svg (they are not on the screenshot - just the background), I have some ideas why, but I don’t know how to fix it. Screenshot of the element and what script give me as a result, I'll leave on imgur.Thank you in advance)))

https://imgur.com/a/zAkg6az

JavaScript needed to create a screenshot made in the .html file and throw it here.

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

I hope this helps, but this method has 2 restrictions:

Namespace xmlns="http://www.w3.org/2000/svg" is required or image not to be loaded
Styles must be inside svg or its not to be applied

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: Sorry for my english

来源：https://stackoverflow.com/questions/55534944/how-to-make-screenshot-for-block-with-svg-elements-on-the-site

标签

javascript

svg

png

html2canvas