将画布坐标保存到本地文件 php

Question

我想将我生成的画布保存到我的本地文件中。 我已经可以将绘图显示到我的画布上，但是在它之后我不知道如何保存它的坐标。

这就是我目前所拥有的

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" />

我已经将值存储到我的数据库中（单选按钮选项）

<? 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');
?>

现在我让 php 工作了，我想包含画布的坐标或画布本身以保存在我的本地文件中。我想早点展示它

<?php
 $canvas_path = $_POST['']; //the path file to store in my local form, the VARCHAR link can be displayed in database
 $context = $_POST[''];

?>

我被困在这里多少天了，我真的需要帮助。 提前谢谢！

Answer 1

作为一个简单的解决方法，而不是讨论边缘情况和数据结构，只需将画布保存为带有 canvas.toDataUrl 的图像数据

然后使用任何常用方法将文本发送到服务器，例如将隐藏输入元素的值设置为图像数据字符串。

<input hidden name="image-data">

然后，在所有画布的东西都完成之后：

inputElement.value = canvas.toDataUrl();

现在它可以在 PHP 中访问了：

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

现在有多种方法可以使用这个字符串。通过将其设置为任何<img> 的 src，您将发现它是如何完全编码图像的有效 url，并且您不必费力寻找将这种编码转换为其他任何东西的方法想要，因为这是相当普遍的标准