Speichern Leinwand Koordinaten in lokale Datei PHP

Question

Ich möchte meine generierte Leinwand in meine lokale Datei speichern. Ich kann die Zeichnungen bereits auf meiner Leinwand anzeigen, aber danach weiß ich nicht, wie ich ihre Koordinaten speichern soll.

das ist, was ich habe

function display() { 
 
var canvas = document.getElementById('displaycanvas'); 
 
context = canvas.getContext('2d'); 
 
context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    if(document.getElementById('color1').checked){ 
 
     context.strokeStyle="#FF0000"; 
 
    } else if(document.getElementById('color2').checked){ 
 
     context.strokeStyle="#0000FF"; 
 
    } 
 
    if (document.getElementById('shape1').checked) { 
 
      context.beginPath(); 
 
      context.arc(95,50,40,0,2*Math.PI); 
 
      context.stroke();  } 
 

 
    if (document.getElementById('shape2').checked) { 
 
      context.beginPath(); 
 
      context.rect(50, 27, 50, 100); 
 
      context.stroke(); } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" id="showchoices" name="showchoices" method="post" action="submitorder.php"> 
 
<canvas id="displaycanvas"></canvas> 
 
<div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O 
 
<input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] </div> 
 

 
<div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED 
 
<input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div> 
 
</form> 
 

 
<input type="button" name="btn" value="Save Canvas" id="save" class="btn btn-primary" />

ich bereits die Werte in meiner Datenbank (Optionsfeld Auswahl) gespeichert, so weit gekommen

<? php 

$shape_design = $_POST['shape_design']; 
$color_design = $_POST['color_design']; 

$link = mysql_connect('localhost', 'root', ''); 
@mysql_select_db('design_DB', $link); 

$query1 = "INSERT INTO order_cake (shape_design, color_design) VALUES ('$shape_design' , '$color_design'); 
?> 

Jetzt habe ich die php working, möchte ich die Koordinaten der Leinwand oder der Leinwand selbst in meine lokale Datei speichern. Ich wollte es früher anzeigen

Ich habe hier für wie viele Tage fest, ich brauche wirklich Hilfe. Vielen Dank im Voraus!

Answer 1

Als einfache Lösung, anstatt Grenzfälle und Datenstrukturen zu diskutieren, ist einfach mit canvas.toDataUrl

Dann senden Sie den Text an den Server mit einem der gängigen Methoden die Leinwand als Bilddaten zu speichern, wie Einstellung der Wert eines verborgenen Eingabeelements als Bilddatenfolge

<input hidden name="image-data">

dann, nach all der Leinwand Sachen getan worden ist:

inputElement.value = canvas.toDataUrl();

und jetzt ist es zugänglich in PHP:

$imageData = $_GET['image-data']

Es gibt verschiedene Möglichkeiten um diese Zeichenfolge jetzt zu verwenden. Indem Sie es auf die Quelle einer beliebigen <img> setzen, werden Sie feststellen, dass es sich um eine gültige URL handelt, die das Bild vollständig codiert, und Sie müssen nicht nach Wegen suchen, diese Codierung in etwas anderes zu verwandeln, das Sie vielleicht möchten. Wie es ziemlich üblich Standard ist