Saving canvas to file on server with PHP

Question

I am not very experienced in PHP but I managed to cobble together a few examples to make this. I just want to save the image of a canvas element to a file on the server. Right now a PNG with 0 bytes is created, so I'm nearly there.

It was suggested to me to try another solution from a separate thread, though unfortunately it gives me the same error (a png file of 0 bytes). Here is the entire index.php code for that:

<!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>

Note that I have also tried giving the INPUT form the name "my_hidden" in addition to it being the ID.

EDIT: With this particular method, my problems were solved by two changes. First, "my_hidden" must indeed by the NAME as well as ID of the input field. Second, the form element must have a method='post' on it.

Possible duplicate of http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server — skrilled, Jul 24 '14 at 23:18
It never gets resolved there. The PHP code of the selected answer doesn't work, apparently. — prismspecs, Jul 24 '14 at 23:27
There are multiple answers with users confirming other answers proposed worked for them. Have you tried those? The accepted answer doesn't always mean it's the best answer just for future reference. — skrilled, Jul 24 '14 at 23:33
Yes. The author actually states that each solution didn't work for him/her. Right in the comments. — prismspecs, Jul 24 '14 at 23:35
The second answer down with 19 upvotes has no comments about it not working unless file size is too large (or where user tried to save in a different format than jpg). It only has upvotes to comments saying that it is very simple and works great :/ Are you saying you personally tried this solution and it didn't work for you? — skrilled, Jul 24 '14 at 23:42
Touche. I apologize that these didn't answer your issue. If it wasn't so late in the day I'd try some stuff and get back. Worst case if you don't get an answer by tomorrow I'll see what I can do for you :) — skrilled, Jul 24 '14 at 23:47
The URI gets copied into the hidden form just fine, and the PHP is activated, but I think it's likely not receiving the correct info for POST. — prismspecs, Jul 25 '14 at 00:00
Try setting `method='post'` on the `
` element. You're trying to read `$_POST` but by default a form will do a HTTP GET: http://stackoverflow.com/questions/2314401/what-is-the-default-form-posting-method — Michael Bates, Jul 25 '14 at 00:09
You glorious bastard. Worked like a charm! Coincidentally, I love you. — prismspecs, Jul 25 '14 at 00:10

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

By default a form will do a HTTP GET, and you haven't specified a method attribute on the <form>. Because it's a GET $_POST['my_hidden'] will be undefined.

Try this:

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

See here for more about the default form method: What is the default form HTTP method?

edited May 23 '17 at 11:50

Community

1
1

answered Jul 25 '14 at 00:15

Michael Bates

1,884
2
29
40

Saving canvas to file on server with PHP

1 Answers1