Sending

Question

I take some photos using the webcam. HTML looks like this:

<div class="camera">
<video id="video">Video stream not available.</video>
</div>

The taken photo is displayed using a <canvas>:

<div class="output">    
<canvas id="canvas"></canvas>
</div>

Below, I have a <form> with a save button:

<form method="post">
<button name="savephoto">Save photo</button>
</form>

This is how I check in PHP if save photo botton is pressed: if (isset($_POST['savephoto'])) Now, how could I get the photo (from canvas) in PHP only using JavaScript?

Have a look at [this](http://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring) topic. Think that could help you! — Douwe de Haan, Apr 24 '17 at 14:32
may [this](http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server) help. — sixerss, Apr 24 '17 at 14:48

score 0 · Answer 1 · answered Apr 24 '17 at 14:33

0

You should lookup canvas.toDataUrl().

Here is an article showing it in use: https://davidwalsh.name/convert-canvas-image

answered Apr 24 '17 at 14:33

Jason

118
12

abraham63 · Answer 2 · 2017-04-24T14:40:59.857

0

var canvas = document.getElementById("canvas");
var img    = canvas.toDataURL("image/png");

Then add it to your form with a field and post your form with JS and in php side you can get this string and add it in a file.

      var form = document.getElementById("formID");
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("name", "canvasImg");
      hiddenField.setAttribute("value", img);
      form.appendChild(hiddenField);
form.post();

In your php file you can get your image string with $_POST['canvasImg'] but in your html you have to set the php file in the submit attribute.

edited Apr 24 '17 at 14:40

answered Apr 24 '17 at 14:33

abraham63

443
4
17

I get the part where I have the canvas photo in JS. But I don't get the part where I start to use it in PHP. – Alex Apr 24 '17 at 14:43
if you want to make the form submit automatically you have to do it with JS. So you use form.post() but to send data of your field you have to specify a php file which contains code for image. In this file you will have your image as a string with $_POST['canvasImg'] (something like data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=") Then you have to deal with it. Personnaly I write the image in a file and deal with the file but it depends of what you want to do. – abraham63 Apr 24 '17 at 14:47
I have both the `HTML` and `PHP` in the same file, is that a problem? – Alex Apr 24 '17 at 14:52
no it's the same thing just look how to detect when your form is submitting to handle you picture treatment. (I don't know how, genreally I use external file ;) ) – abraham63 Apr 24 '17 at 14:57

Sending image to PHP using JS

2 Answers2

Sending