2016-07-21 15 views
0

Wie würde ich ein Canvas-Objekt, wie das folgende, serialisieren?Speichern Sie ein Canvas-Objekt als JSON

  context.beginPath(); 
      context.rect(188, 50, 200, 100); 
      context.fillStyle = 'yellow'; 
      context.fill(); 
      context.lineWidth = 7; 
      context.strokeStyle = 'black'; 
      context.stroke(); 

Da es prozedural mit der Leinwand Zusammenhang der Interaktion ist (ist das die richtige Terminologie?) Ich glaube nicht, es ist möglich. Aber ich möchte Objekte wie diese so speichern, dass es einfacher ist, sie zu manipulieren.

Ich meine, wie könnte ich zwei Elemente wie das oben, aber nur die x, y Startpositionen ändern? Alles, woran ich denken kann, ist eval, aber ich weiß, dass das Zeichnen auf der Leinwand schrecklich verlangsamen würde.

+0

Serialisierung erzeugt eine Zeichenfolge. Sie müssten diese Zeichenfolge nicht json-ify, es sei denn, Sie planen, sie in einem json-Kontext zu verwenden, z. Senden Sie es durch eine Ajax-Anfrage, und selbst dann könnten Sie einfach 'JSON.stringify ({data: var_with_serialized_object})' –

+0

Ich würde die Daten aus dem Objekt, nicht das Objekt (Canvas) selbst speichern, so später rufen Sie die Informationen, um die ursprüngliche Leinwand zu reproduzieren ... aber gut ist nur der Ansatz, der meiner Meinung nach praktischer wäre ... –

Antwort

1

Wenn Sie Ihre Zeichnung einfach neu positionieren möchten, ohne sich mit den Originalkoordinaten zu beschäftigen, verwenden Sie einfach context.translate, wodurch der Zeichenbereich [0,0] auf eine beliebige Position auf der Zeichenfläche verschoben wird.

function draw(offsetX,offsetY){ 
    // translate the [0,0] origin of the canvas to [offsetX,offsetY] 
    context.translate(offsetX,offsetY); 

    // draw the original rectangle (no changes are required to any coordinates 
    context.beginPath(); 
    context.rect(188, 50, 200, 100); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.lineWidth = 7; 
    context.strokeStyle = 'black'; 
    context.stroke(); 

    // always clean up! Reverse the translation 
    context.translate(-offsetX,-offsetY); 
} 

Wenn Sie Ihre ursprüngliche Leinwand Befehle an ein anderes Gerät senden möchten, dann müssen Sie den Kontext Zeichenbefehle serialisiert. Sehen Sie sich diese vorherige Q&A an, die zeigt, wie Canvas-Zeichnungsbefehle in einer Zeichenkette gespeichert werden. Diese Zeichenfolge kann an anderer Stelle gesendet werden (z. B. mit AJAX oder websockets) und dann kann das empfangende Gerät die Befehle "wiederholen".

1

Die context.getImageData() ist die Funktion, die Sie suchen. Es wird ein ImageData-Objekt aus den Daten auf einer Zeichenfläche (MDN) zurückgegeben. Es ist Syntax lautet wie folgt:

ImageData ctx.getImageData(sx, sy, sw, sh); 

Also, wenn Sie die Daten aus einer Leinwand speichern und serialisiert werden möchten, müssen Sie den folgenden Code verwenden:

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

Nun ist die .data Eigenschaft auf einem ImageData Objekt ist eine Uint8ClampedArray, die im Grunde eine große Liste aller Farben einer Leinwand ist. Wie auch immer Sie sich entscheiden, es zu serialisieren, ist nicht wichtig.


Angenommen, Sie haben eine der serialisierten Canvas- "Meldungen" erhalten und möchten sie auf eine Leinwand setzen. Kein Problem, alles, was Sie brauchen, ist context.putImageData():

context.putImageData(message.data, 0, 0); 

Dies wird „Einfügen“, um die Daten aus der ersten Leinwand auf die zweiten.

Viel Glück!

Verwandte Themen