从绘画游戏中保存/加载画布

Question

我编写了一个非常简单的“绘画游戏”，现在只有黑色。代码是

var canvas = document.getElementById("drawingPad");
var context = canvas.getContext("2d");
var isMouseDown = false;
var mouseX = 0;
var mouseY = 0;

context.strokeStyle = "#000000"; // Målar våra svarta strokes som blir vår pensel

// När användaren aktiverar muspekaren på vår canvas
canvas.addEventListener("mousedown",function (evt) {
isMouseDown = true;

mouseX = evt.offsetX;
mouseY = evt.offsetY;

context.beginPath();
context.moveTo(mouseX, mouseY);
});


window.addEventListener("mouseup",function (evt) {
isMouseDown = false;
});

// När användaren flyttar på muspekaren
canvas.addEventListener("mousemove",function (evt) {
if (isMouseDown) {
mouseX = evt.offsetX;
mouseY = evt.offsetY;

context.lineTo(mouseX, mouseY);
context.stroke();
}
});

我要寻找的下一步是保存画布，然后加载之前绘制的其他图片。我一直在寻找答案，也许本地存储是要走的路，或者它是一种更简单的方法吗？ （我对画布很新，而且我对JS和HTML / CSS只有很少的知识）

Answer 1

如果您仅使用像素，则可以使用imageData：

var data = canvas.getImageData(0,0, width, height);

现在，您只需向服务器发送AJAX请求（以防止页面加载）并将imagedata发送到数据库。像这样的东西：

$.ajax({
    type: "POST",
    url: '/api/storeData',
    data: data,
    dataType: 'application/json'
});

之后，您可以创建一个按钮，使用GET请求从服务器检索图像数据。

$.ajax({
    type: "GET",
    url: '/api/getData',
    success: onSuccess
});

并使用方法putImageData()来更新您的图像：

canvas.putImageData(data, 0, 0);

然后你就有了你的图像数据！