Capture variable image content

Question

Capture variable image content

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have an HTML5 application that captures a webcam image by the browser which I need to capture and write to the database as a binary.

On the server side, in PHP, I have:

$directory = $img;
$element_img = base64_encode(file_get_contents($directory));

And the capture process in the client, with Javascript, occurs through the onClick event of a button, which after capture sends it to another window that I open in the browser:

function btnCaptura() {
    var img = App.canvas.toDataURL("image/png");

    window.open(img, "_blank", "menubar=0,titlebar=0,toolbar=0,width=" + App.canvas.width + ",height=" + App.canvas.height);

}

And although it works, that is, the captured image is sent to open window, I need to send that image to PHP so it can be saved to the database, but I can not.

Note: If it is possible to do everything in the same window, without opening a new one, just showing a warning that the image was captured successfully, it would be better.

php javascript ajax

asked by anonymous 15.12.2014 / 13:39

2 answers

How to do when a button is clicked, an element is created on the page? Close only one window

score 1 · Answer 1

Well, as to open in the same window, just replace _blank with _self , note; if you leave the parameter blank, the default is _blank . As for saving content in a php variable, you can save the image in a sessionStorage, then reload the page.

function btnCaptura() {
   var img = App.canvas.toDataURL("image/png");
   sessionStorage.setItem('imagem', img); /* se for conveniente manter os dados depois de o usuário fechar o navegador, crie uma localStorage no lugar de uma sessionStorage. */
   alert("Salvo com sucesso");
   location.reload();
}

So, in your php just put:

$img = "<script> sessionStorage.getItem('imagem');</script>";

score 1 · Answer 2

You can do this using jquery with ajax like this:

var img = App.canvas.toDataURL("image/png");
$.ajax({
    type: POST, url: 'urlpagina.php'
        data: { 
            imagem   : img,
        }
    }).done(function( res ) {
        // res conterá a resposta de urlpagina.php, faça o que quiser com ele
    });

You can still send by ajax without using Jquery. But using it is a lot easier. If you want to do without Jquery you have an example here: link

PHP will receive the image in the system variable $ _POST ['image'] as is common in submits.