CODEWITHSUNDEEP
androidcordova
prodeveloper
prodeveloper

Reputation: 950

Displaying contact image in HTML using PhoneGap

I am trying to display the image with URL content://com.android.contacts/contacts/1/photo in the image element of HTML page.

Although it's a old problem, Can anyone please provide me a complete example to display a contact image in img element using PhoneGap.

Thanks in advance, prodeveloper.

Upvotes: 2

Views: 2587

Answers (2)

vinesh
vinesh

Reputation: 4923

you can directly use
<img src="content://com.android.contacts/contacts/1502/photo" alt="Oops!!">
once you have the url of image !

Upvotes: 1

pix
pix

Reputation: 1290

I read a lot on this probleme and the problem seems to be solved on the cordova 3.2.0 here is my code.

You do not need to create a tempory image or something else.

 var init = function () {
        var options = new ContactFindOptions();
        options.filter = "";          // empty search string returns all contacts
        options.multiple = true;      // return multiple results
        var filter = ["displayName",
            "phoneNumbers",
            "photos"];
        navigator.contacts.find(filter, onSuccess, onError, options);
    };

    function onSuccess(contacts) {
        var contactPhoto;

        for (var i = 0; i < contacts.length; i++) {
            if (contacts[i].displayName && contacts[i].phoneNumbers) {
                contactPhoto = defaultvalue;
                if (contacts[i].photos) {
                    for (var j = 0; j < contacts[i].photos.length; j++)
                        if (contacts[i].photos[j].value) {
                            contactPhoto = contacts[i].photos[j].value;
                            break;
                        }
                }
                showContactsModel.Contacts.add(
                    {
                        displayName: contacts[i].displayName,
                        phoneNumbers:contacts[i].phoneNumbers, 
                        photo: contactPhoto
                    });
            }
        }
    }

and my binding

<img data-bind="attr:{src: photo}" alt="something.png" />

Upvotes: 2

Related Questions