Html5-based webpage dashboard

Html5 technology is increasingly eroded by this Internet, and we have to admit that the changes brought about by Html5 are still great. By chance, we found Html5 to call the computer camera API, as a result, I thought of making a webpage-based dashboard to implement the photo taking and simple modification functions. The initial version is relatively simple. You can check the effect. Saymagic.sinaapp.com/takephoto /. (!)

Okay, now I will introduce the implementation process. The code is already open-source on GitHub and will be provided later. First, Let's explain that the website runs on the sae platform, therefore, images are uploaded and stored in the storage of sae. Therefore, if you do not deploy images on sae after downloading, some functions will not be available, that is, if you use sae, you also need to create your own storage, so copy party should pay attention to it.

There are still a lot of code. First, let's take a look at the code on the main interface,

<! DOCTYPE html> <! -- [If lt IE 7]> The body part defines the layout of this page, and the specific css will no longer be, mainly composed of two divs, A photographed div and the modified div, which defines some href connections, this is mainly about the script part. This part is the main code for photo taking. I defined the video tag in the photo, this allows you to see the picture in your computer when you are using a camera. If you take a picture, you only need to make the video stream pause.

Okay. The basic principle is as follows. Let's talk about the specific code corresponding to each connection button.

1. Photograph: (index.html)

document.getElementById("snap").addEventListener("click", function() {clearTimeout(timer);video.pause();});
2. Delayed photographing in five seconds: (index.html)


document.getElementById("autophotograph").addEventListener("click",function(){video.play();timer = setTimeout(function(){video.pause();},5000);});

3. Repeat: (index.html)


document.getElementById("rephotograph").addEventListener("click", function() {clearTimeout(timer);video.play();});

4. Modify: (index.html)


document.getElementById("change").addEventListener("click", function() {context.drawImage(video, 0, 0, 440, 330);});

5.saesite (index.html)

Ah, oh ~~ Link connection =

<A href = "http://www.sae.sina.com.cn"> sae site </a>
6. Download to the local device (index. js)


    $("#download").click(function() {        var myCanvas = document.getElementById("canvas");        var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");        // window.location.href=image;        var filename = 'paint_' + (new Date()).getTime() + '.png';        //saveFile(image, filename);                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');        save_link.href = image;        save_link.download = filename;        var event = document.createEvent('MouseEvents');        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);      //  save_link.dispatchEvent(event);    });

7. Share to this site (index. js): ps uploads the image stream to the stoarge of sae.


Document. getElementById ("share "). onclick = function () {// Ajax submits data var xhr = new XMLHttpRequest; xhr. open ("POST", "upload. php ", true); xhr. onreadystatechange = function () {if (xhr. readyState! = 4) return ;}; // obtain DataURL from canvas and send xhr. send (canvas. toDataURL (); alert ("shared successfully! ");};

8. View others' shares: (paint/show. php)

This is a connection to the paint/show. php page, but it is still difficult to generate this page. If you use a local file for storage, You can traverse all the images under the image file. If you want to do more advanced, you can achieve dynamic loading, this is to traverse all images on a stoarge of sae. The Code is as follows:

<? Php $ fileTypes = array ('jpg ', 'jpeg', 'gif', 'png '); $ width = 200; $ height = 200; $ pageTitle = "Pictures "; //************************************** * ********************* $ s = new SaeStorage (); $ domain = 'takephoto '; // The Name Of The domain I just created $ filelist = $ s-> getList ($ domain, "", 100 ); $ f = join (',*. ', $ fileTypes); $ f = '*. '. $ f; $ height + = 20;?> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

To put it bluntly, the image is expanded using a popImage, a simple but practical tool.

Finally, GitHub. Https://github.com/saymagic/takephoto. If you have any questions, you are welcome to raise them.