Ionic Series--call camera to take photos and select Library photo function implementation

1. Requirements Description

One of the most recent things to do is call the camera to take a photo and upload it, or simply open the gallery and select the photo and upload it.

2. Preparation

①, add plugin $cordovacamera

Cordova Plugin Add Cordova-plugin-camera

②, adding dependencies to the controller

3. Code implementation

$scope. Takephoto=function () {    var options = {                                                                     //These parameters may be used in conjunction with, for example, SourceType is selected 0,destinationtype to the corresponding settings          quality: 100,                                              // Photo quality 0-100        destinationtype: camera.destinationtype.file_uri ,         //return type: data_url= 0, returned as  base64  encoded string.  file_uri=1, returns the  uri of the image file. native_uri=2, return image native uri  (for example, assets)         sourceType:  camera.picturesourcetype.camera,              Where to choose the picture: photolibrary=0, camera photo =1,savedphotoalbum=2. 0 and 1 are actually local galleries         allowEdit: false,                                          // Allow to modify         encodingType:Camera.EncodingType.JPEG,   before selecting                  // Saved picture format: jpeg = 0, png = 1        targetwidth: 200,                                          //Photo Width          targetheight: 200,                                         //Photo Height         mediatype:0,                                                //Optional Media type: Picture = 0, only the selected image will return the parameters of the specified destinationtype.   Video format = 1, allows selection of videos and eventually returns  file_uri. AllmediA= 2, allows selection of all media types.         cameraDirection:0,                                         //post-gun camera type: Back= 0, front-facing = 1        popoveroptions:  camerapopoveroptions,        savetophotoalbum: true                                     //save into Mobile album      };     $cordovaCamera. Getpicture (Options). Then (function (ImageData)  {         commonjs.alertpopup (ImageData);         vaR image = document.getelementbyid (' myimage ');         image.src=imagedata;        //image.src =  "DATA:IMAGE/JPEG; Base64, " + imagedata;    }, function (ERR)  {         // error        commonjs.alertpopup ( Err.message);     });

4. Some notes

① if you want to save a photo, you need to set destinationtype to return the image path, and then set Savetophotoalbum:true, both of which are set to save the photo, but the quality of the saved photo is poor. And this time although set allowedit:true, but return is the path of the source file, this function is equal to no use.

② if you want to intercept a picture, set Allowedit:true, and DestinationType returns a base64-bit encoded string.

③ when setting SourceType:Camera.PictureSourceType.CAMERA, this time the selection of the library interface is very difficult to see, you need to set SourceType to 0 or 2 this time is the system of the library, good-looking point. So we take pictures, and then call the open album in the success callback to select a picture, the effect will be better.

④ long and wide settings affect the size of the clipping box only, that is, if the return base64 affects the size of the picture, the return URI does not affect it.

The ⑤ is less effective than JPG when set to PNG.

⑥ when I set the Camera.DestinationType.NATIVE_URI, the clip returns the same photo that was previously taken, but the photos placed in the image tag are up to date. Then I found out that it was the problem that caused the EncodingType:Camera.EncodingType.PNG.

⑦ This sentence people say is to clean up the cache, the concrete implementation has not been used, and then study it

$cordovaCamera. Cleanup (). then (...); Only for File_uri

After ⑧ I will improve the content of the blog, when the choice to upload a pop-up actionsheet, there is a choice of library, photos and other options. Upload words can be directly base64 encoded string directly to the background processing, you can also use angular upload, you can also use Cordova-tranfer.

Ionic Series--call camera to take photos and select Library photo function implementation