HTML画布保存在mysql数据库上 - HTML canvas saving on mysql database

我的代码被卡住了。

问题：我有画布，在里面我画线。在我完成后，我希望这些行留在我离开的正确位置（在重新加载网站之前）。所以我需要将画布发送到mysql数据库。但我坚持了下来。我是否首先需要创建.png图像，然后尝试将该图像信息发送到数据库？或者我可以用AJAX把它从代码直接发送到数据库？我读了很多信息，现在我很困惑。

如果我将使用方法HTMLgetImageData()和HTMLputImageData()，那么我需要在我的服务器中创建一些真实的图像？或者我可以直接从画布上取？并发送到mysql数据库？：）

所以现在我有了html格式的Canvas和一些绘制线条的脚本：

$(".widget_body").on("mousedown", "canvas", function() {
    var id = $(this).attr("id");
    var canvas = document.getElementById(id);
    var canvas,
        context,
        dragging = false,
        dragStartLocation,
        snapshot;
    fitToContainer(canvas);
    function fitToContainer(canvas){
      // Make it visually fill the positioned parent
      canvas.style.width ='100%';
      canvas.style.height='100%';
      // ...then set the internal size to match
      canvas.width  = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }

    function getCanvasCoordinates(event) {
        var x = event.clientX - canvas.getBoundingClientRect().left,
            y = event.clientY - canvas.getBoundingClientRect().top;
        return {x: x, y: y};
    }
    function takeSnapshot() {
        snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
    }
    function restoreSnapshot() {
        context.putImageData(snapshot, 0, 0);
    }

    function drawLine(position) {
        context.beginPath();
        context.moveTo(dragStartLocation.x, dragStartLocation.y);
        context.lineTo(position.x, position.y);
        context.stroke();
    }
    function dragStart(event) {
        dragging = true;
        dragStartLocation = getCanvasCoordinates(event);
        takeSnapshot();
    }
    function drag(event) {
        var position;
        if (dragging === true) {
            restoreSnapshot();
            position = getCanvasCoordinates(event);
            drawLine(position);
        }
    }
    function dragStop(event) {
        dragging = false;
        restoreSnapshot();
        var position = getCanvasCoordinates(event);
        drawLine(position);
    }
    function clearCanvas(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 4;
    context.lineCap = 'round';
    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
    canvas.addEventListener('dblclick', clearCanvas, false);
    });

也许有人能给我提个建议？也许下一步该怎么办？从这一刻起我该怎么办？

好吧，这取决于您是将画布保存为单个图像，还是保存它的每个组件（如线、正方形等）。

如果您将其保存为单个图像，那么将数据URL保存到数据库中会更容易。否则，创建包含每个形状的属性和值的JavaScript对象，例如：

var line =
{
    Name: "Line",
    Color: "#3D4AEE",
    Shadow: "NULL"
    Length: "",
    Point: "130, 120"
}

然后将对象转换为JSON字符串：

var JSONLine = JSON.stringify(line);

现在，您可以将一些内容插入到数据库中。

现在，当你需要从数据库中检索它，以便在浏览器中重新绘制它时，你所需要做的就是查找"设计"，获取组成该设计的所有部分，并使用保存的形状的属性将它们重新绘制到画布中。

我将由您来决定如何构建数据库以适应不同类型的形状，以及它们与所创建的"设计"的关系。

1.您可以使用AJAX将坐标保存在数据库中，而无需重新加载页面，然后通过AJAX获取坐标并在Javascript中动态设置。如果你想使用一个让AJAX请求更容易使用的JS库，我推荐jQueryhttp://api.jquery.com/jquery.ajax/

2.您可以使用之类的东西将画布转换为图像

function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

然后将图像保存到数据库中。但是，您将无法以这种方式更改画布，它将是一个图像。第一种方法允许您保存画布的信息。有点像Photoshop和PSD文件。

首先，您应该使用Canvas.toDataURL导出数据。之后，您可以通过Fetch API使用FormData发送数据。

var fd = new FormData();
fd.append('field', canvas.toDataURL('image/jpg'), 'sketch.jpg');
fetch('/saveSketch', {
  method: 'POST',
  body: fd,
});

在服务器端，您需要解析此FormData来检索文件。此时，您的文件已经可以保存到数据库或文件系统中。