Question

所以我正在用HTML5画布构建一个非常简单的绘图应用程序。

基本上，我希望用户能够在画布上画一条线，关闭浏览器，然后回来，并且该线仍然存在。

这可能吗？我发现您可以将画布另存为图像，但是可以将图像重新加载到新画布中吗？

Answer 1

我会尽力向您解释。如您所说，您可以将画布的内容另存为图像，但是在处理完图像之后呢？对于一个非常明显的安全问题，您无法将图像保存在用户的计算机上。一种方法是创建服务器（例如，在node.js中始终使用javascript），并且当用户决定保存图形时，将创建图像，该图像将被发送到服务器并将其加载到数据库中连接到服务器。但这是一个非常复杂的解决方案，并且仅在特定条件下有用，例如，如果您希望在应用程序的用户之间交换图像。对于您和大多数人而言，将图形保存在本地存储中就足够了。

什么是HTML Web存储？借助网络存储，网络应用程序可以在用户的浏览器中本地存储数据。

使用本地存储，您可以保存和读取将保留在浏览器中的变量。变量的值只能是字符串，但是没有问题！例如，如果您想要（例如在下面的小项目中）将对象或数组保存在本地存储中，则可以将它们转换为字符串json（如果您不知道json是什么，请看这里：https://en.wikipedia.org/wiki/JSON和此处https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript）。如果要查看应用程序保存的变量，请为Google chrome打开控制台，转到“应用程序”选项卡，然后将其找到本地存储和会话存储（另一种存储数据的方式）在这个小项目中，我们保存了组成图形的一系列点。有关本地存储的更多信息，请访问以下链接：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage 但是请记住，并不是所有的浏览器都支持本地存储，因此适用于较旧浏览器的该应用程序将无法正常工作，请使用chrome，您就可以了！

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

将画布数据保存到浏览器

1 个答案: