保存在 mysql 数据库上的 HTML 画布

Question

我的代码卡住了。

问题：我有画布，我在里面画线。在我完成后，我希望这些行留在我离开的正确位置（在重新加载网站之前）。所以我需要将该画布发送到 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);
    });

也许有人可以给我一些建议？也许关于下一步的事情？从这一刻起我应该做什么？

Answer 1

嗯，这取决于您是将 Canvas 保存为单个图像还是保存它的每个组件（例如线条、正方形等）。

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

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

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

var JSONLine = JSON.stringify(line);

现在你有了可以插入数据库的东西。

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

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

Answer 2

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

2.您可以使用类似的方法将画布转换为图像

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

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

Answer 3

首先，您应该使用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 以检索文件。此时，您的文件已经可以保存到数据库或文件系统中了。