Html5+php to achieve the photo

Getusermedia (streams, success, error);
Streams: An object that represents which multimedia devices are included
Success: callback function that gets called when a multimedia device succeeds

Error: callback function, calling when a multimedia device fails

Createobjecturl (BLOB | | file);
A file object or a Blob object
File object, is a document, for example, I use the input type= "file" tag to upload files, then each of the files are a file object.
Blob objects, which are binary data, such as objects created with a new blob () are BLOB objects. For example, in XMLHttpRequest, if a responsetype is specified as a blob, the resulting return value is also a Blob object.

Todataurl, transforms the canvas canvas into the base64 encoded image;

1: Acquiring photographic equipment

2:: Photo

3: Draw the photos on the canvas canvas

4: Convert the canvas canvas into a base64 encoded picture

5: Upload pictures and save

Note that:

1, the real image data is the Base64 code comma after the part, so our actual server processing image data should be this part.

2, sometimes with Base64_encode encryption, to get the form to other pages, with Base64_decode decryption, there are garbled. Replace the blanks with the + number first. Then the output is normal $img = Str_replace (', ' + ', $img);

Html:

<div id= "Contentholder" >
<video id= "video" width= "height=" autoplay></video>
<button id= "Camera" > Photo </button>
<canvas id= "Canvas" width= "height=" >
</canvas>
</div>

Js:

<script type= "Text/javascript" >
var video = document.getElementById (' video ');


Window.addeventlistener ("domcontentloaded", function () {

Navigator.getusermedia = Navigator.getusermedia | |
Navigator.webkitgetusermedia | |
Navigator.mozgetusermedia;

if (Navigator.getusermedia) {
Navigator.getusermedia ({video:true},
function (stream) {
video.src = window. Url.createobjecturl (stream);
Video.onloadedmetadata = function (e) {
Video.play ();
};
},
function (Err) {
alert (err.name);
}
);
}
});


$ ("#camera"). Click (function () {
var canvas = document.getElementById (' canvas ');
var context2d = Canvas.getcontext ("2d");
Context2d.fillstyle = "#ffffff";
Context2d.fillrect (0, 0, 320, 320);
Context2d.drawimage (video, 0, 0, 320, 320);
var image_code =canvas.todataurl ("Image/png");
$.ajax ({
Type: "POST",
URL: "{: url (' Diy/diycamerasave ')}",
DataType: "JSON",
Data: "Image_code=" +image_code,
Success:function (msg) {
Alert ("Data Saved:" + msg.msg);
}

});


});



</script>

PHP Side:

Public Function Diycamerasave ()
{
$image _code = $_post[' Image_code '];
$image = Base64_decode (Str_replace (' data:image/png;base64, ', ', $image _code)); it's been stuck here for a long time.
$img = Str_replace (' data:image/png;base64, ', ', $image _code);
$img = Str_replace (', ' + ', $img);
$data = Base64_decode ($img);


$file _name = "Data/attached/images/diycamera". Time (). ". PNG ";
$fp = fopen ($file _name, ' W ');
Fwrite ($fp, $data);
Fclose ($FP);
Model (' Diy ')->insert_camera ($file _name);
$res [' err_no '] = 0;
$res [' msg '] = ' saved successfully. ";
Die (Json_encode ($res));
}