时间戳

首页 > 解决方案 > 如何在网站上制作带有 svg 元素的块的屏幕截图？

javascript - 如何在网站上制作带有 svg 元素的块的屏幕截图？

问题描述

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

标签： javascriptsvgpnghtml2canvas

解决方案

我希望这会有所帮助，但这种方法有两个限制：

  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：对不起我的英语

推荐阅读