Capture Variable Image Content

Asked

Viewed 1,381 times

1

I have an HTML5 application that captures a webcam image through the browser that I need to capture and record 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 process of capturing the client, with Javascript, takes place through the onClick event of a button, which after captured 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 the open window, I need to send this image to PHP so that it can be saved in the database, but I’m not getting it.

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

  • Test what I told you in the answer and return if you have any problems.

  • I can put the code of your save function inside my btnCaptura function thus: Function btnCaptura() { var img = App.canvas.toDataURL("image/png"); window.open(img, "_self", "menubar=0,Titlebar=0,Toolbar=0,width=" + App.canvas.width + ",height=" + App.canvas.height); sessionStorage.setItem('image', img); /* if it is convenient to keep the data after the user closes the browser, create a localStorage instead of a sessionStorage */ Alert("Successfully saved"); Location.Reload(); }

  • What are you going to use open() for? No need, in your case.

  • Look at my answer.

  • commented the line //window.open(img...... as your example captured the content of the img variable that is in javascript, in php it looked like this: $img = "<script> sessionStorage.getItem('image');</script>"; var_dump ($img); $directory = $img; $element = base64_encode(file_get_contents($directory)); echo '<img src="data:image/png;Base64,'. $element. ' "/>'; giving error->>>>string(51) "" Warning: file_get_contents(): failed to open stream: Invalid argument

  • To pass url as filename you must have allow_url_fopen in php.ini enabled. See if this is it.

  • Directive; Local Value; Master Value; allow_url_fopen; On; On;

Show 2 more comments

2 answers

1

Well, as for opening in the same window, just replace the _blank for _self, note; if you leave the parameter blank, the default is _blank. As for saving the 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();
}

Logo, in your php just put:

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

1

Can do 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
    });

vc can still send by ajax without using Jquery. But using it is much easier. If you want to do without Jquery have an example here: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

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

  • Caro Nelson. When trying to use your code inside the Function btnCaptura this way: Function btnCaptura() { var img = App.canvas.toDataURL("image/png"); $. ajax({ type: POST, url: 'urlpagina.php' date: { image : img, } }). done(Function( res ) { // res will contain the answer of urlpagina.php, do whatever you want with it }); } //With this, when clicking on the browser, it does not allow the user’s webcam access window ->>>>>>>>http://webcamtoy.com/pt/

  • the code above is just to illustrate an Ajax call. If you need to go through this permission window, put in a function separates the code where it appears and synchronously get the value you need. Then make the Ajax call. If you don’t know what synchronous and asynchronous say I’ll explain.

Browser other questions tagged php javascript ajax

You are not signed in. Login or sign up in order to post.