Html5+php to achieve the photo

Source: Internet
Author: User
Tags base64
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));
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.