Добавил кнопку скриншота
This commit is contained in:
parent
33f3a277b2
commit
aad8b23aa8
46
index.html
46
index.html
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>To-Do List</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
@ -11,9 +12,54 @@
|
||||
<div class="todo-header">
|
||||
<input type="text" placeholder="Добавить задачу..." />
|
||||
<button>+</button>
|
||||
<button class="save-btn" onclick="saveAsImage()">
|
||||
<svg
|
||||
id="SvgjsSvg1001"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:svgjs="http://svgjs.com/svgjs"
|
||||
>
|
||||
<defs id="SvgjsDefs1002"></defs>
|
||||
<g id="SvgjsG1008">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 22"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke="#ffffff"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M1 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M6 11l4 4 4-4M10 1v14"
|
||||
class="colorStroke000 svgStroke"
|
||||
></path>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="todo-list"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function saveAsImage() {
|
||||
let gridElement = document.querySelector(".todo-list");
|
||||
html2canvas(gridElement, { scale: 2 }).then((canvas) => {
|
||||
let link = document.createElement("a");
|
||||
link.download = "todo.png";
|
||||
link.href = canvas.toDataURL("image/png");
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user