從徒手畫中保存數據（不保存為圖像文件）

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> 

小提琴

Answer 1

畫布無法處理矢量圖形，因為它會光柵化繪制到它的任何內容。 因此，畫布只會為您提供位圖（原始或編碼為圖像）。 畫布只能顯示這些矢量被光柵化的結果，而以后再也不能以原始形式提供它們。

為了獲得處理向量的效果，您需要執行以下操作：

以可序列化的格式（例如帶有文字對象的數組）跟蹤和收集點。 換句話說：您需要在鼠標處理程序中“記錄”這些點，同時將它們渲染到畫布上。

您還需要分開“筆畫”（筆畫是從鼠標向下移動到鼠標上移，然后為下一個筆畫創建一個新數組，依此類推。這意味着您將需要一個具有兩個級別的對象，一個對象用於收集筆畫數組，一個數組每筆）。

完成后，您可以使用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});