我在网站上创建了一个构造函数,其本质是将所选元素及其颜色(svg中的元素)添加到访问者选择的背景和背景颜色(png中的背景),然后必须单击“保存结果”按钮,仅执行工作区的屏幕截图。我写了这个脚本,但是只需要截图,但只需要背景,而忽略了已选择和安装的svg(它们不在截图中,而是背景),我有一些想法,但是,我不知道如何解决它。元素的屏幕快照以及脚本给我的结果,我留在imgur。提前谢谢)))
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>
答案 0 :(得分:0)
我希望这会有所帮助,但是此方法有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:对不起,我的英语