Сохранить данные холста в браузере
Итак, я создаю очень простое приложение для рисования с холстом HTML5.
По сути, я хочу, чтобы пользователь мог нарисовать линию на холсте, закрыть браузер, вернуться, а линия все еще там.
Это возможно? Я обнаружил, что вы можете сохранить холст как изображение, но смогу ли я повторно загрузить это изображение Вернуться в на новый холст?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я постараюсь объяснить вам, как могу. Как вы сказали, вы можете сохранить содержимое холста как изображение, но после этого вы это сделаете с изображением? Из-за довольно очевидной проблемы безопасности вы не можете сохранить изображение на компьютере пользователя. Одним из способов было бы создать сервер (например, в node.js, чтобы всегда использовать javascript), и когда пользователь решит сохранить рисунок, изображение будет создано, оно будет отправлено на сервер и будет загружено в базу данных. подключен к серверу. Но это очень сложное решение, которое полезно только в определенных условиях, например, если вы хотите, чтобы изображения обменивались между пользователями приложения. Для вашего случая и большинства людей будет достаточно сохранить рисунок в локальном хранилище.
What is HTML Web Storage? With web storage, web applications can store data locally within the user's browser.
С помощью локального хранилища вы можете сохранять и читать переменные, которые останутся в браузере. Значением переменных могут быть только строки, но это не проблема! Если вы хотите, например (как в небольшом проекте ниже) сохранить в локальном хранилище объекты или массивы, вы можете преобразовать их в строку json (если вы не знаете, что такое json, посмотрите здесь: https://en.wikipedia.org/wiki/JSON и здесь https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript). Если вы хотите увидеть переменные, которые сохраняет приложение, откройте консоль для google chrome, перейдите на вкладку Appliaction, и вы найдете их локальное хранилище и хранилище сеанса (еще один способ хранения данных). В этом небольшом проекте мы сохраняем массив точек, составляющих рисунок. Для получения дополнительной информации о localstorage вот ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Однако помните, что не все браузеры поддерживают локальное хранилище, поэтому это приложение для старых браузеров не будет работать, используйте хром, и все в порядке!
HTML-код:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>App to draw</title>
<style>
html,
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
outline: 0;
}
#render {
border: 5px solid rgba(120, 120, 129, 0.452);
border-radius: 10px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
border: 2px solid;
border-radius: 10px;
width: 100px;
transition: .5s;
}
.save {
border-color: #4CAF50;
background-color: #4CAF50;
color: white;
}
.save:hover {
background-color: white;
color: black;
}
.clear {
border-color: #008CBA;
background-color: #008CBA;
color: white;
}
.clear:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class = "container">
<h3>Simple app for drawing made with ? by Niccolo'</h3>
<canvas id = "render"></canvas>
<div class = "tools">
<input type = "button" class = "button save" value = "save" onclick = "canvas.saveDrawing()">
<input type = "button" class = "button clear" value = "clear" onclick = "canvas.clearDrawing()">
</div>
</div>
<script src = "sketch.js"></script>
</body>
</html>
Код Javascript:
"use strict";
//mouse position
let mouseX,
mouseY,
isDragging = false;
//Canvas
class Canvas {
constructor() {
//html canvas
this.canvas = document.getElementById("render");
//context
this.ctx = this.canvas.getContext("2d");
//dimensions
this.width = this.canvas.width = 300;
this.height = this.canvas.height = 300;
//Points that make up the simple design
//He goes to look in the localstorage, if he does not find it he creates a simple array
this.points = this.getDrawing() || [];
//color
this.color = "black";
this.weight = 5;
}
update() {
//If the user is dragging the mouse inside the canvas, he creates points
if (isDragging) {
if (
mouseX >= 0 &&
mouseX <= this.width &&
mouseY >= 0 &&
mouseY <= this.height
) {
this.points.push({
x: mouseX,
y: mouseY
});
}
}
}
draw() {
//delete the background
this.ctx.clearRect(0, 0, this.height, this.width);
//set the color
this.ctx.fillStyle = this.color;
//draw points
for (let point of this.points) {
this.ctx.save();
this.ctx.translate(point.x, point.y);
this.ctx.beginPath();
this.ctx.arc(0, 0, this.weight, 0, 2 * Math.PI, true);
this.ctx.fill();
this.ctx.restore();
}
}
//save in the localstorage the points that make up the design
saveDrawing() {
const json = JSON.stringify(this.points);
localStorage.setItem("drawing", json);
}
//search for points in the localstorage
getDrawing() {
return JSON.parse(localStorage.getItem("drawing"));
}
//clean the drawing pad
clearDrawing() {
this.points = [];
}
}
//Canvas
const canvas = new Canvas();
//Events
window.addEventListener("mousemove", event => {
let rect = canvas.canvas.getBoundingClientRect();
mouseX = event.clientX - rect.left;
mouseY = event.clientY - rect.top;
});
window.addEventListener("mousedown", () => (isDragging = true));
window.addEventListener("mouseup", () => (isDragging = false));
//main function in loop
function main() {
canvas.update();
canvas.draw();
requestAnimationFrame(main);
}
//The program starts here
main();
Удачи в вашем проекте :-D
Это один из самых подробных ответов, которые я когда-либо получал, большое вам спасибо! Не знаю, как я не подумал сохранить нарисованные точки, а потом просто перерисовать их при загрузке. Прекрасно работает с моим проектом.