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，您将了解它是如何完全对图像进行编码的有效网址，并且您不必非常难以找到将此编码转换为其他内容的方法你可能想要，因为这是相当普遍的标准

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

1 个答案: