Saturday, 5 December 2020

How to Selecting a picture from the library in PhoneGap?

 In our previous section, we learned how we could create thumbnail and "high quality" image. In this section, we will learn how to select a picture from the library using PhoneGap. The process of selecting a picture from the library is the same as taking pictures using the camera. There is only one thing which we have to add, i.e., source type. We will make changes in the takePic function.

These are the following steps used to select a picture from the library:

1) Create a new project

Firstly, we will create a new PhoneGap project with a blank template. If you don't know how to create an app with a blank template, go through the PhoneGap project link.

Selecting a picture from the library

2. Create UI

Now, we will use the body section of the index.html file and make a UI for taking picture and showing it on the display or screen. This UI contain buttons and an image area for showing picture. The body section will be coded as:

  1. <body>  
  2.         <img id="imgArea" />  
  3.         <button id="btnTakePicture"> Choose Picture </button>  
  4.         <button id="btnClear"> Clear Picture </button>  
  5.         <script type="text/javascript" src="cordova.js"></script>  
  6. </body>  


Selecting a picture from the library

3) Create window.onload function

Now, we will create the window.onload function. In this function, we will get both the buttons and attach the listener to them. The first button will call the takepic function, and the second button calls the anonymous function. In this anonymous function, we will get the image area using Id and set its source to null in the following way:

  1. window.onload=function()  
  2.         {  
  3.             document.getElementById('btnTakePicture').addEventListener('click', takePic);  
  4.             document.getElementById('btnClear').addEventListener('click',function(){  
  5.                document.getElementById('imgArea').src="";   
  6. });  

4) Create takePic callback function

Now, we will create the takePic callback function. In this function, we will set all the options which we have discussed before. We will set the quality to 80, destination type to File URI, and source type to photo library. We will call the navigator's getPicture function having success, fail, options argument in the following way:

  1. function takePic(e)  
  2.         {  
  3.             var options = {  
  4.                 quality: 80,  
  5.                 destinationType: Camera.DestinationType.FILE_URI,  
  6.                 sourceType: Camera.PictureSourceType.PHOTOLIBRARY  
  7.             }  
  8.             navigator.camera.getPicture(success, fail, options);  
  9. }  

5) Create success and fail callback function

The fail callback function contains only an alert message which will define the error. The success callback function takes the image as an argument. In this function, we will get the image area and set the image in it.

  1. function success(thePicture)  
  2. {  
  3.             var image = document.getElementById('imgArea');  
  4.             image.src = thePicture;  
  5. }  
  6.               
  7. function fail(e)  
  8. {  
  9.             alert("Image failed: " + e.message);  
  10. }  

Now, we are ready to run our project.

Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  6.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />      
  7.         <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
  8.         <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  
  9.         <style>  
  10.             #imgArea  
  11.             {  
  12.                 border: 1px solid black;  
  13.                 max-width: 600px;  
  14.             }  
  15.         </style>  
  16.         <script>  
  17.         window.onload=function()  
  18.         {  
  19.             document.getElementById('btnTakePicture').addEventListener('click', takePic);  
  20.             document.getElementById('btnClear').addEventListener('click',function(){  
  21.                document.getElementById('imgArea').src="";   
  22.             });  
  23.                                                                    
  24.         }  
  25.           
  26.         function takePic(e)  
  27.         {  
  28.             var options = {  
  29.                 quality: 80,  
  30.                 destinationType: Camera.DestinationType.FILE_URI,  
  31.                 sourceType: Camera.PictureSourceType.PHOTOLIBRARY  
  32.             }  
  33.             navigator.camera.getPicture(success, fail, options);  
  34.         }  
  35.   
  36.               
  37.         function success(thePicture)  
  38.         {  
  39.             var image = document.getElementById('imgArea');  
  40.             image.src = thePicture;  
  41.         }  
  42.               
  43.         function fail(e)  
  44.         {  
  45.             alert("Image failed: " + e.message);  
  46.         }  
  47.         </script>  
  48.         <title> Selecting Picture</title>  
  49.     </head>  
  50.     <body>  
  51.         <img id="imgArea" />  
  52.         <button id="btnTakePicture"> Choose Picture </button>  
  53.         <button id="btnClear"> Clear Picture </button>  
  54.         <script type="text/javascript" src="cordova.js"></script>  
  55.           
  56.     </body>  
  57. </html>  

Output

Selecting a picture from the library


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)