Use html5+ to call mobile phone cameras and albums __html

Preface:Front-End time using HTML5 to do a web-side app, which uses the H5 page to invoke the function of the mobile phone camera, it also took a lot of time to study. Finally, the use of Html5plus (html5+) way to complete the function, the specific method is introduced briefly, and explain the usage of the notes. Example:Specific process: Click on the trigger to choose a photo or photo album--> photo or photo album--> get picture Path for compression--> read the file and displayed on the page is the first HTML code, very simple, is to add a button, click Trigger Events, here I do not put the CSS file out, You know it's a add button on the line.

<H2 class= "Title-detail" >
                   	picture description
                

Later we look at the specific JS code, according to the above we say the method is divided into 5 methods, as follows:
Picture Display function Showpics (url,name) {//read to file Plus.io.resolveLocalFileSystemURL based on path (url,fun
        		   Ction (Entry) {Entry.file (function (file) {var filereader = new Plus.io.FileReader ();
                   	   Filereader.readasdataurl (file);
                	       Filereader.onloadend = function (e) {var picurl = e.target.result.tostring ();
	               		var Picindex = $ ("#picIndex"). Val ();
	               		var nowindex = parseint (picindex) +1;
	               		$ ("#picIndex"). Val (Nowindex);
	               		var html = ';
	               		html + + ' <div class= ' image-item ' id= ' item ' +nowindex+ ' ' > ';
	               		html + + ' <div class= ' image-close "onclick=" delpic (' +nowindex+ ') ">X</div>"; html + + ' <div></div> ';
	               		HTML + = ' </div> '; HTML + $ ("#image-liSt "). html (); 
                   	$ ("#image-list"). HTML (HTML);
          }
        	   }); 
       });
           }//Compress picture function Compressimage (url,filename) {var name= "_doc/upload/" +filename; Plus.zip.compressImage ({src:url,//src: (String type) compression converts the path of the original picture dst:name,//compression conversion Mesh The path to the quality:40,//quality: (number Type) compresses the quality of the picture. Value Range is 1-100 overwrite:true//over
            	   Write: (Boolean type) overwrite generate new file}, function (Zip) {//page display picture
               Showpics (Zip.target,name);  
           },function (Error) {plus.nativeUI.toast ("Compress picture failed, please try again later");  
       });  
           //Call phone camera and take photos function getImage () {var CMR = Plus.camera.getCamera ();  
                   Cmr.captureimage (function (p) {Plus.io.resolveLocalFileSystemURL (P, function (entry) { CompRessimage (Entry.tolocalurl (), entry.name);  
               }, Function (e) {plus.nativeUI.toast ("read photo file Error:" + e.message);  
           });  
       }, Function (e) {}, {filter: ' image '}); ///Select Photo function Galleryimgs () {Plus.gallery.pick (function (e) {var name = e.sub) from photo album
    	       STR (e.lastindexof ('/') + 1);
    	    Compressimage (E,name);  
    	}, Function (e) {}, {filter: "image"});   
    	    //Click event, pop-up Select camera and album option function Showactionsheet () {var BTS = [{title: "Photo"  
    	    }, {title: "Select from album"}];  
    	        Plus.nativeUI.actionSheet ({cancel: "Cancel", Buttons:bts},  
    	            Function (e) {if (E.index = 1) {getImage (); else if (E.index = 2) {Galleryimgs ();  
    	}  
    	        }  
    	    ); }

There are several points to note: (1): Compress the image method, here I use is to write a new file (2): Picture Display method, this method is very important. Because
for my side is the web side of the app, the page is returned by the server, we can get the picture of the local mobile phone, many online statements are directly to take file path shows, but I did not show it. That's why we used the FileReader to read the local file, e.target.result.tostring (); This method returns the base64 encoding of our picture, so you see below I am the dynamic spell HTML page, Directly assign the content to the IMG label SRC can directly display the picture. "There has been a long struggle here" with this base64 encoded URL, we can upload directly to the background.
Use Note:This is mainly about packaging tools different needs to do the work is not the same. My side is the use of Hbuilder online packaging, of course, the shell can also be packaged in the Android environment, below specifically to note the place. Hbuilder: This is a very convenient web development tool, you can pack the app online. "Due to network problems, I can not upload pictures, as far as possible text description" We need to build an app project in Hbuilder, point open Manifest.json file, this file is our app configuration information, the following navigation bar are: Application information, icon configuration, start Flash configuration , SDK configuration, Permissions module configuration, and so on. Generally we need to match the application information (app name, entrance), icon, start Flash (you can choose to start the picture), the SDK configuration is generally some maps, payments, push and so on. The point is, if we use html5+,
need in the module permission configuration, select the function we use, for example, we use the plus.nativeui.*, we need to select the Nativeui (native UI) module, that is, we used plus.xx.*, we need to check the corresponding module. "This Manifest.json is a visual interface that you can download and install to understand the Android environment: a little more complicated than the hbuilder,android environment, because I didn't do it in the Android environment, Here is just the introduction of the Hbuilder official website of some use instructions.
Examples: For example, we need to use the camera object, we need to do the following configuration:

2.1: Add Camera.jar.

Add 2.2:androidmanifest.xml Permission node:

<uses-permission android:name= "Android.permission.CAMERA"/>
<uses-feature android:name= "Android.hardware.camera"/>

Add 2.3:properties.xml Features Node:

<featurename= "Camera" value= "Io.dcloud.js.camera.CameraFeatureImpl"/> This configuration can be downloaded on Hbuilder's official web site, Contains all the jar packages and the configuration required for different permissions.
Because cannot upload the picture, many things describe also is not very clear, if everybody has the question, welcome exchanges.