gpt4 book ai didi

javascript - 如何为网站上带有 svg 元素的 block 制作屏幕截图?

转载 作者:行者123 更新时间:2023-11-30 19:39:42 24 4
gpt4 key购买 nike

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

最佳答案

我希望这会有所帮助,但是这种方法有两个限制:

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

关于javascript - 如何为网站上带有 svg 元素的 block 制作屏幕截图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55534944/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com