Question

我在网站上创建了一个构造函数，其本质是将所选元素及其颜色（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>

Answer 1

我希望这会有所帮助，但是此方法有2个限制：

命名空间xmlns="http://www.w3.org/2000/svg"是必需的，否则将不加载图像
样式必须在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：对不起，我的英语

如何在网站上使用svg元素制作块截图？

1 个答案: