简化示例

Question

我一直在尝试从HTML5 Canvas的绘图功能中保存数据/对象，如何通过x和y坐标点保存到mySQL表，而不是将其转换为JPEG或图像文件？

目标是将笔划保存为数据文件而不是图像文件。我怎么能这样做？

var canvas = document.getElementById('canvas'),
    coord = document.getElementById('coord'),
    ctx = canvas.getContext('2d'), // get 2D context
    imgCat = new Image();

  /*********** draw image *************/
  imgCat.src = 'http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
  imgCat.onload = function() { // wait for image load
    ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
  };

  /*********** handle mouse events on canvas **************/
  var mousedown = false;
  ctx.strokeStyle = '#0000FF';
  ctx.lineWidth = 2;
  canvas.onmousedown = function(e) {
    var pos = fixPosition(e, canvas);
    mousedown = true;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
    return false;
  };

  canvas.onmousemove = function(e) {
    var pos = fixPosition(e, canvas);
    coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
    if (mousedown) {
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    }
  };

  canvas.onmouseup = function(e) {
    mousedown = false;
  };

  /********** utils ******************/
  // Thanks to http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element/4430498#4430498
  function fixPosition(e, gCanvasElement) {
    var x;
    var y;
    if (e.pageX || e.pageY) {
      x = e.pageX;
      y = e.pageY;
    } else {
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;
    return {
      x: x,
      y: y
    };
  }
  ``

<div id="left_col">
  <canvas id="canvas" width="900" height="900" style='background-image:url(http://www.robertshadbolt.com/content/01-articles/01-900x900/900x900.gif);' center cetner no-repeat></canvas>
  <div id="coord" hidden></div>

Fiddle

Answer 1

Canvas无法处理矢量图形，因为它会栅格化绘制的任何内容。因此，canvas只会为您提供位图（原始或编码为图像）。画布只能显示这些光栅化矢量的结果，但之后不能以原始形式提供它们。

要获得处理矢量的效果，您需要执行以下操作：

以可序列化的格式跟踪和收集点，例如带有文字对象的数组。换句话说：您需要在鼠标处理程序中“记录”这些点，并将它们渲染到画布。

你还需要分离“笔画”（笔画是从鼠标向下移动到鼠标向上，然后为下一个笔画创建一个新数组等等。这意味着你需要一个有两个级别的对象，一个用于收集笔画数组，每个笔画一个数组。）

完成后，您可以使用JSON.stringify（）序列化数组并发送到您的数据库。

要恢复，请回读该字符串并使用JSON.parse（）恢复数组。

简化示例

// some dummy point in a serializeable format:
var points = [
      {x: 10, y: 10},
      {x: 20, y: 50},
      {x: 100, y: 10}
    ];

// serialize
var str = JSON.stringify(points);
document.write("To server: " + str + "<br>");

// send str to database here...

// RESTORE

// read from database here

var restoredPoints = JSON.parse(str);
document.write("Point from restored array - x: " +
               restoredPoints[1].x + " y: " +
               restoredPoints[1].y);

在一个更实际的例子中，你的对象看起来像（伪代码）：

var strokes = [];

onmousedown: 
   create new array -> strokes.push([]);
   index = strokes.length - 1;
   add point to current stroke -> strokes[index].push({x:x, y:y});

onmousemove:
   add point to current stroke -> strokes[index].push({x:x, y:y});

从徒手绘图中保存数据（而不是图像文件）

1 个答案:

简化示例