How to Use HTML5 to upload images using cameras

(For ease of reading, modify the original text without losing its original intention, including repeating some errors in the Code and making comments)

HTML5 supports webapps to take photos on mobile phones, display them on pages, and upload them to servers. This is a common function in Mobile Weibo applications. You can also use this technology in other types of applications.

1. Video Stream

The media capture API of HTML5 provides programmable access to the camera. You can directly use getusermedia
(Currently, only chrome and Opera support video streams. What we need to do is add an HTML5 video tag and use the video obtained from the camera as the input source of this tag.

• <Video ID = "video" autoplay = ""> </video>
• <SCRIPT>
• VaR video_element = Document. getelementbyid ('video ');
• If (navigator. getusermedia) {// opera should use opera. getusermedianow
• Navigator. getusermedia ('video', success, error); // success is a callback function. You can also write an anonymous function directly here.
• }
• Function success (Stream ){
• Video_element.src = stream;
• }
• </SCRIPT>
  In this case, the video tag displays dynamic video streams. Take a picture below.

　　2. Take a photo

Image taking uses the canvas function of HTML5 to capture the video TAG content in real time. Because the video element can be used as the input of the canvas image, this is a good implementation. The main code is as follows:

• VaR canvas = Document. createelement ('canvas '); // dynamically create a canvas object
• VaR CTX = canvas. getcontext ('2d ');
• VaR CW = VW, CH = FLAC;
• CTX. fillstyle = "# ffffff ";
• CTX. fillrect (0, 0, CW, CH );
• CTX. drawimage (video_element, CW, CH, VW, or otherwise); // capture the specified area in the video object and draw it to the area specified on the canvas, you can draw unequal spaces.
• Document. Body. append (canvas );

　　3. Image Retrieval

The core idea of retrieving image data from canvas is to use the todataurl of canvas to convert canvas data to a base64 encoded PNG Image, similar to "data: image/PNG; base64, XXXXX format.

• VaR imgdata = canvas. todataurl ("image/PNG ");

  In this way, the imgdata variable stores a long string of character data content, indicating the base64 encoding of a PNG image. Because the real image data is a part of the base64 encoded comma, we can use two methods to obtain the image data received by the actual server.

The first is to take 22 character strings from the front end as image data. For example:

• VaR DATA = imgdata. substr (22 );

To obtain the image size before uploading, you can use:

• VaR length = atob (data). length; // atob decodes strings decoded using base-64.

Second, extract 22 character strings after the backend obtains the transmitted data using the background language (that is, directly upload the strings after skipping the preceding steps on the foreground ). For example, in PHP:

• $ Image = base64_decode (str_replace ('data: image/JPEG; base64, ', ", $ data );

4. upload images

You can use Ajax at the front end to upload the image data obtained above to the background script. For exampleJqueryCan be used:

• $. Post ('upload. php', {'data': Data });

In the background, we use PHP scripts to receive data and store the data as images.

• Function convert_data ($ data ){
• $ Image = base64_decode (str_replace ('data: image/JPEG; base64, ', ", $ data );
• Save_to_file ($ image );
• }
• Function save_to_file ($ image ){
• $ Fp = fopen ($ filename, 'w ');
• Fwrite ($ FP, $ image );
• Fclose ($ FP );
• }

The above solution can be used not only for web app photo upload, but also for image editing through the canvas editing function, such as cropping, coloring, graffiti, and labeling, then, upload the edited image to the server.

Driven by HTML 5, the distance between Web apps and native apps will become smaller and smaller. In the foreseeable future, more and more old and new development projects will be migrated to Web applications.

Related specifications:

The mediacapture API: http://www.w3.org/TR/media-capture-api/

Canvas: http://dev.w3.org/html5/2dcontext/

 

This article from: http://h5dev.uc.cn/thread-14-1-1.html and some appropriate modifications on the layout and content.