如何在网站上制作带有svg元素的屏幕截图? [英] How to make screenshot for block with svg elements on the site?
问题描述
我在网站上创建了一个构造函数，其本质是将所选元素及其颜色(svg中的元素)添加到访问者选择的背景和背景颜色(png中的背景)，然后必须单击单击保存结果"按钮，仅执行工作区的屏幕截图.我写了这个脚本，但是只需要截图，但只需要背景，而忽略了已选择并安装的svg(它们不在截图中-只是背景)，我对为什么有一些想法，但是我不知道如何解决它.元素的屏幕快照以及脚本给我的结果，我留在imgur上.谢谢您)))
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)))
JavaScript需要创建一个在.html文件中制作的屏幕截图并将其扔到此处.
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>
推荐答案
我希望这会有所帮助，但是此方法有2个限制:
I hope this helps, but this method has 2 restrictions:
-
名称空间
xmlns="http://www.w3.org/2000/svg"是必需的，否则将不加载图像
Namespace
xmlns="http://www.w3.org/2000/svg"is required or image not to be loaded
样式必须在svg内部，否则将不被应用
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:对不起，我的英语水平
PS: Sorry for my english
这篇关于如何在网站上制作带有svg元素的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
