"Demo" HTML5 photo

This article mainly explains how to take pictures in Mobile browser

Why does this need to be

Recently do a project to use to take pictures and upload photos, but the web is generally used to take pictures with flash, and we are mainly H5 page, if you have permission in the inside can be jssdk to adjust the camera to take pictures. Here we mainly say mobile browser how to adjust the camera

H5 How to turn on the camera

No special support is required, just one line of code is required.

<input id= "Upload" type= "file" accept= "image/*" capture= "Camera" >

How to preview a diagram

The principle is to use JS to get the image stream of input file, then assign to the img tag src attribute, and then set the IMG CSS, you can get the effect you want, the code is as follows

; Var demo_h5_upload_ops = {    init:function () {         this.eventbind ();     },    eventbind:function ( ) {        var that = this;         $ ("#upload"). Change (function () {             var reader = new filereader ();             reader.onload = function  (e)  {                 that.compress (This.result);             };             reader.readasdataurl (This.files[0]);         }) ;    },    compress : function  (RES)  {         var that = this;        var img =  new image (),             maxh =  300;        img.onload = function  ()  {             var cvs =  Document.createelement (' canvas '),                 ctx = cvs.getcontext (' 2d ');             if (IMG.HEIGHT > MAXH)  {                 img.width *= maxH / img.height;                 img.height = maxH;             }             cvs.width = img.width;             cvs.height = img.height;             Ctx.clearrect (0, 0, cvs.width, cvs.height);             ctx.drawimage (img, 0, 0, img.width, img.height);             var dataurl = cvs.todataurl (' Image/jpeg ',  1)             $ (". Img_wrap"). attr ("src", Dataurl)             $ (". Img_wrap"). Show ();             //  on Biography              that.upload ( dataUrl );        };         img.src = res;    },     Upload:function ( image_data ) {        /* writes the last method here, the picture stream is base64_ Encode */    }};$ (document). Ready ( function () {    demo_h5_upload_ Ops.init ();}  );

Example Demo

Address: Http://m.vincentguo.cn/demo/h5_upload can also be scanned by mobile phone

I have personally tested the UC browser and my own browser perfectly compatible with the iOS system

Original address: "Demo" HTML5 photo
Tags: demo h5 photo HTML5

Smart recommendations

• Operations and maintenance Skills Daquan | The periodic table of Devops Tools
• "The first" Monitoring Linux performance 25 command-line tools
• "ITerm2" beautify your terminal for Buddha statue
• PHP failed to create Git branch via exec
• "No.2" Monitoring of Linux Performance 25 command-line tools

"Demo" HTML5 photo