个人中心
gpt4 book ai didi

javascript - 将 Canvas 数据保存到浏览器

转载 作者：行者123 更新时间：2023-12-03 01:16:54 26 4
gpt4 key购买 nike

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

基本上，我希望用户能够在 Canvas 上画一条线，关闭浏览器，再回来，这条线仍然在那里。

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

最佳答案

我会尽力向您解释。正如您所说，您可以将 Canvas 的内容保存为图像，但是在处理图像之后呢？对于相当明显的安全问题，您无法将图像保存在用户的计算机上。一种方法是创建一个服务器(例如在 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 )。如果您想查看应用程序保存的变量，对于谷歌浏览器，请打开控制台，转到“应用程序”选项卡，您将找到它们本地存储和 session 存储(存储数据的另一种方式)在这个小项目中，我们保存组成绘图的点数组。有关本地存储的更多信息，请点击链接: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

关于javascript - 将 Canvas 数据保存到浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51972157/

26 4 0
文章推荐： javascript - 如何在 Mocha 中查找嵌套属性/值对
文章推荐： javascript - 从 Dropzone.js 获取完整尺寸图像(不是缩略图尺寸)的数据 URI
文章推荐： phpdoc - 如何将 phpDoc 导入到 Confluence 中？
文章推荐： javascript - 将framework7的 Handlebars 变量传递给函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com