Display contact photo using cordova + ionic + android

cordova
1

Hi,

Is there anyway to display contact photo. Am struck and not able to move with this. I have tried pulling photos value from (contact.photos[0].value) it displays as : content://com.android.contacts/contacts/16954/photo.

I use the same path like below doesnt display anything on the mobile:
img ng-src="content://com.android.contacts/contacts/16954/photo" style="border:1px solid" width="100" height="100"

I have tried below methods:

  1. adding this in app config $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);

  2. Using window.resolvelocalfilesystemurl.

Even i have tried some pickContact samples from internet like http://www.raymondcamden.com/2014/07/09/Cordova-Plugin-update-and-new-Contacts-demo doesnt work on my mobile. The contact picture doesnt get displayed

Please help. Thank you

2

Did you solve it? I am facing exactly the same issue.

3

No actually i digged a lot at that time… couldnt solve the issue. read at many places that in ionic we cant get this done. But not sure if things changed now.

4

Contact Controller:

contactModule
.controller('contactCtrl', function($scope, $cordovaContacts, $ionicPlatform, $ionicLoading, contactServ, $timeout) {

  $scope.contacts =[];

  $scope.getAllContacts = function() {
    contactServ.loadAllCont(function(_data){
      $scope.contacts = _data;
    });
  };`

// ===== auto load contacts ========
  $timeout(function(){
    $scope.getAllContacts();
  },1000);

});

Contact Service:

contactModule.
factory('contactServ',function($ionicLoading, $cordovaContacts){


  function loadAllCont(callBack)
  {
    $ionicLoading.show({template: '<ion-spinner class="spinner-energized" icon="lines"></ion-spinner> Accessing Contact List'});
    var opts = {                                              
      filter : '',                       
      multiple: true,      
      fields:  ['displayName', 'name', 'emails', 'photos']
    };
    $cordovaContacts.find(opts).then(function(allContacts)
    {
      console.log(JSON.stringify(allContacts));
      $ionicLoading.hide();
      callBack(allContacts);
    },
    function(){
      callBack(false);
    });
  }

  return{
    loadAllCont:loadAllCont
  }
})

Contact HTML

<ion-view title="Contact" cache-view="false">
<ion-content class="padding" >
<div class="list">
	<a class="item item-avatar" href="#" ng-repeat ="cont in contacts">
		<img src="{{cont.photos[0].value}}" ng-if="cont.photos.length > 0">
		<img src="img/user-avatar.jpg" ng-if="!cont.photos">
		<h2>{{cont.displayName}}</h2>
		<p ng-if="cont.phoneNumbers.length > 0" ng-repeat ="phn in cont.phoneNumbers"><span>{{phn.type}}:</span> {{phn.value}}</p>
		<p ng-if="cont.phoneNumbers.length == null"><span>Phone:</span> Not available</p>
	</a>
</div>
</ion-content>
5

I saved photo on the phone and save only URL information on the photo contact and works.
Complete code available on https://github.com/AbrahimSA/Cordova-Contact-Camera-Geolocation-Media-Storage-Splashscreen

If you will get picture from camera you can use code:
//function cameraTakePicture() { – click imgAddContact
$( “#imgAddContact” ).click(function() {
// alert(“imgAddContact”);
navigator.camera.getPicture(onSuccess, onFail, {
quality: 100,
allowEdit:true,
targetWidth:225,
targetHeight:225,
destinationType: Camera.DestinationType.FILE_URI
});

               function onSuccess(imageData) {
               $('#imgAddContact').attr('src', imageData);
                }

               function onFail(message) {
                  alert('Failed because: ' + message);
               }
          }
    );

you can save photo contact this way:

             var contact = navigator.contacts.create();
             contact.displayName = $("#contactName").val() ;
             var phoneNumbers = [];
             phoneNumbers[0] = new ContactField('mobile', $("#contactNumber").val(), true);
             contact.phoneNumbers = phoneNumbers;
                var photos = [];
              photos[0] = new ContactField('URL',  $("#imgAddContact").attr( "src" ), true);
               contact.photos = photos;

                contact.save(onSuccess,onError);

and to get the photo information you can use: contacts[i].photos[0].value

7

I Solve it by
<img [src]=“webView.convertFileSrc(content://com.android.contacts/contacts/16954/photo)” />