Mobile phone end with HTML5 to achieve photo upload function

HTML5 realize WAP website photo uploading function

Do Web applications to achieve this effect:

Currently published online tutorials, most of the introduction HTML5 Web Photo upload is based on canvas call the camera, and converted to the data stream for transmission, the server decoded and written to the file. The code good hundreds of lines, the impact of performance does not say, to achieve the effect is not what we want.

After analysis of Baidu Bar page, such as the code, found that the implementation of the technology is actually very simple, is the following input:

<input type= "file" name= "pic" id= "pic" accept= "image/*" class= "Upload-input"/>

is the above line of code, you can achieve the desired effect, hand Opportunity pop-up selection dialog box, ask the choice of camera photos, or photo albums and so on. The most important thing is the Accept attribute, about this attribute more content, everybody can own Baidu a bit.

Simple enough? and compatibility-level stick.

Server-side processing, as usual we do the site's file upload the same, do not need more?? Aluminum Forgive?/p>

Of course, the exact effect is different from the browser because of the difference.

Using HTML5 to realize camera photo uploading function

HTML5 Technical Support WebApp photos on the phone, displayed on the page and uploaded to the server. This is a common feature in mobile phone microblogging applications, and you can use this technique in other types of applications as well.

　　 1, video streaming

HTML5 's media Capture API provides programmable access to the camera, which allows users to access the video stream provided by the camera directly with Getusermedia (please note that only Chrome and opera support is currently available). What we need to do is add a HTML5 video tag and will get the videos from the camera as the input source for this label.

<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, but you can also write an anonymous function directly here
}
Function success (stream) {
Video_element.src=stream;
}
</script>
In this case, the video label will display a dynamic camera stream. The following needs to be photographed.

　　 2. Take photos

Taking a photo is a HTML5 canvas feature that captures the contents of a video tag in real time, because it can be used as input to canvas images, so it's a good thing to do. The main code is as follows:

var canvas=document.createelement (' canvas '); Create a Canvas object dynamically
var ctx=canvas.getcontext (' 2d ');
var CW=VW,CH=VH;
Ctx.fillstyle= "#ffffff";
Ctx.fillrect (0,0,CW,CH);
Ctx.drawimage (VIDEO_ELEMENT,0,0,CW,CH,0,0,VW,VH); Draws the area specified within the video object to the specified area on the canvas, and can be plotted in unequal and unequal places.
Document.body.append (canvas);

　　 3, picture acquisition

The core idea of obtaining picture data from canvas is to convert canvas data to Base64 bit encoded PNG image with canvas todataurl, similar to "data:image/png;base64,xxxxx" format.

var imgdata=canvas.todataurl ("Image/png");

Thus, the Imgdata variable stores a long string of character data content, representing the Base64 encoding of a PNG image. Since the real image data is the part of the Base64 encoded comma, the image data to be received by the actual server should be part of this, and we can get it in two ways.

The first is to intercept the 22-bit string as image data at the front end, for example:

var data=imgdata.substr (22);


If you want to get the size of the picture before uploading, you can use:

var Length=atob (data). length; Atob decoding of strings encoded with base-64

The second is to capture the transmitted data in the back end after the 22-bit string is intercepted in the background language (that is, in the foreground skip above this step directly upload). For example, in PHP:

$image =base64_decode (Str_replace (' Data:image/jpeg;base64, ', ", $data);

　　 4, picture upload

In the front end you can use Ajax to upload the image data obtained above to the background script. For example, when using jquery, you can use:

$.post (' upload.php ', {' Data ':d ATA});

In the background we use PHP script to receive data and store it as a picture.

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 not only can be used for web app photo upload, but also can provide image editing by canvas editing function, such as cutting, coloring, graffiti, punctuate, and so on, then upload the image uploaded by the user to the server.

The distance between the Web app and the native app is getting smaller, driven by the HTML5, which is still being supplemented by revisions. In the foreseeable future, more and more old and new development projects will inevitably migrate to Web applications.