使用PHP将画布保存到服务器上的文件_Php_Ajax_Canvas

使用PHP将画布保存到服务器上的文件

php ajax canvas

使用PHP将画布保存到服务器上的文件,php,ajax,canvas,Php,Ajax,Canvas,我对PHP不是很有经验，但我设法拼凑了几个例子来实现这一点。我只想将画布元素的图像保存到服务器上的一个文件中。现在创建了一个0字节的PNG，所以我就快到了有人建议我从另一个线程尝试另一个解决方案，但不幸的是，它给了我同样的错误（一个0字节的png文件）。以下是完整的index.php代码： <!doctype html> <html> <head> <meta charset="utf-8"> <me

我对PHP不是很有经验，但我设法拼凑了几个例子来实现这一点。我只想将画布元素的图像保存到服务器上的一个文件中。现在创建了一个0字节的PNG，所以我就快到了

有人建议我从另一个线程尝试另一个解决方案，但不幸的是，它给了我同样的错误（一个0字节的png文件）。以下是完整的index.php代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Fingerprint Test</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
    </head>
    <body>

        <canvas id="myCanvas" width="578" height="200"></canvas>

        <form name="form1">
            <input type="text" id="my_hidden">
        </form> 

        <script>
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

            // begin custom shape
            context.font = "30px Arial";
            context.fillText("Hello World",10,50);
        </script>

        <button onclick="makePrint()">Click me</button> 

        <script>
            function makePrint() {
                document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
                document.forms["form1"].submit();
            }
        </script>

        <?php 
            $upload_dir = "images/";  //implement this function yourself
            $img = $_POST['my_hidden'];
            $img = str_replace('data:image/png;base64,', '', $img);
            $img = str_replace(' ', '+', $img);
            $data = base64_decode($img);
            $file = $upload_dir."image_name.png";
            $success = file_put_contents($file, $data);
            header('Location: '.$_POST['return_url']);
        ?>
    </body>
</html>


指纹测试
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//开始自定义形状
context.font=“30px Arial”；
上下文。fillText（“Hello World”，10,50）；
点击我
函数makePrint（）{
document.getElementById（'my_hidden'）。value=canvas.toDataURL（'image/png'）；
document.forms[“form1”].submit（）；
}

注意，除了ID之外，我还尝试将输入表单命名为“my_hidden”

编辑：使用这种特殊的方法，我的问题通过两个改变得到了解决。首先，“my_hidden”必须是输入字段的名称和ID。其次，表单元素上必须有一个method='post'。

默认情况下，表单将执行HTTP GET，并且您没有在

上指定method属性。因为它是一个GET

$\u POST['my\u hidden']

将是未定义的

试试这个：

<form name="form1" method="post">
    <input type="text" name="my_hidden">
</form>

有关默认表单方法的更多信息，请参见此处：

此处无法解析该方法的可能重复项。显然，所选答案的PHP代码不起作用。有多个答案，用户确认其他建议的答案对他们有效。你试过那些吗？被接受的答案并不总是意味着它是未来参考的最佳答案。是的。作者实际上表示，每种解决方案都不适合他/她。在注释右侧。尝试在

元素上设置

method='post'

。您正在尝试读取

$\u POST

，但默认情况下，表单将执行HTTP GET：