Kindly checkout code given below I want to save image in folder in JPG format using PHP and AJAX. Kindly help me I am not able to do it.

function base64_toimage() 
{
  $('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) 
{
    $('#formfield').val(b64);
    $('#image').attr("src","data:image/png;base64,"+b64);
};
function changeCamera()
{
    $.scriptcam.changeCamera($('#cameraNames').val());
}       
function onError(errorId,errorMsg) {
    $( "#btn1" ).attr( "disabled", true );
    $( "#btn2" ).attr( "disabled", true );
    alert(errorMsg);
}           
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
    $.each(cameraNames, function(index, text) {
    $('#cameraNames').append( $('<option></option>').val(index).html(text) )
      }); 
    $('#cameraNames').val(camera);
}
</script> 
<br />
<div id="webcam" ></div>
<div  style="width:250px;float:left;" ><img src="webcamlogo.png" alt="" style="vertical-align:text-top"  /> 
<select name="cameraNames" size="1" id="cameraNames" style="width:205px;font-size:10px;height:25px;" onChange="changeCamera()"></select></div>

Kindly checkout code given below I want to save image in folder in JPG format using PHP and AJAX. Kindly help me I am not able to do it.

function base64_toimage() 
{
  $('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) 
{
    $('#formfield').val(b64);
    $('#image').attr("src","data:image/png;base64,"+b64);
};
function changeCamera()
{
    $.scriptcam.changeCamera($('#cameraNames').val());
}       
function onError(errorId,errorMsg) {
    $( "#btn1" ).attr( "disabled", true );
    $( "#btn2" ).attr( "disabled", true );
    alert(errorMsg);
}           
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
    $.each(cameraNames, function(index, text) {
    $('#cameraNames').append( $('<option></option>').val(index).html(text) )
      }); 
    $('#cameraNames').val(camera);
}
</script> 
<br />
<div id="webcam" ></div>
<div  style="width:250px;float:left;" ><img src="webcamlogo.png" alt="" style="vertical-align:text-top"  /> 
<select name="cameraNames" size="1" id="cameraNames" style="width:205px;font-size:10px;height:25px;" onChange="changeCamera()"></select></div>

• javascript
• php
• jquery

Share Improve this question Follow edited May 22, 2015 at 7:24 Trevi Awater 2,40722 gold badges3333 silver badges5555 bronze badges asked May 22, 2015 at 6:01 user4927626user4927626 9111 gold badge33 silver badges99 bronze badges 3

• 2 what problem you are facing while doing this? – Saty Commented May 22, 2015 at 6:02
• PHP cant have an involvement in the task. This is a task for JavaScript because it is a client side process and PHP has no interaction between the client and server, aside from following links. – glend Commented May 22, 2015 at 7:10
• You have to use a Javascript client side library.Search jquery webcam image upload. PHP will be used to handle the upload only. – Fabrizio Mazzoni Commented May 22, 2015 at 7:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Check this on MDN , and it is pretty clear how to create a simple photo booth using WebRTC.

The second part of question is how to save the image data to disk :

1. if you inspect the generated image you will find something like :

< img id = "photo"
alt = "The screen capture will appear in this box."
src = "data:image/png;base64 ...... " >

2. you need to get the src attribute of the img using Javascript

var myImg = document.getElementById("yourImgId").src;

3. then use php to save your file :

$data = myImg;

list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);

file_put_contents('path_to_your_directory/tmp/image.png', $data);

Please note that this page will a php file .

php code can be inserted directly using <? ?>.

If you want to do this via jquery , just post your Imgdata tothe remote php file.