Apache Cordova
  1. Apache Cordova
  2. CB-1045

Obtaining image pointer from contact photo URI

    Details

    • Type: Wish Wish
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Not A Problem
    • Affects Version/s: 1.9.0
    • Fix Version/s: 3.0.0
    • Component/s: Android
    • Labels:
      None

      Description

      This issue was discussed with Simon Mac Donald on the Google PhoneGap Groups. I have been attempting to obtain an image from a contacts URI but I believe this is not currently handled in the PhoneGap Api.

        Activity

        Hide
        Joe Bowser added a comment -

        Braden's solution works for all Cordova versions supported in 3.0.0, closing!

        Show
        Joe Bowser added a comment - Braden's solution works for all Cordova versions supported in 3.0.0, closing!
        Hide
        Joe Bowser added a comment -

        Based on recent discussions, I believe that this will no longer be an issue when we deprecate Froyo because of Braden Shepherdson's solution above.

        Show
        Joe Bowser added a comment - Based on recent discussions, I believe that this will no longer be an issue when we deprecate Froyo because of Braden Shepherdson 's solution above.
        Hide
        Simon MacDonald added a comment -

        @Braden

        That solution will work on Android 2.3 and higher. On earlier devices the Canvas.toDataURL() method is not implemented. Just adding this as a note for anyone trying the above solution.

        Show
        Simon MacDonald added a comment - @Braden That solution will work on Android 2.3 and higher. On earlier devices the Canvas.toDataURL() method is not implemented. Just adding this as a note for anyone trying the above solution.
        Hide
        Braden Shepherdson added a comment -

        Base64 image data may be obtained from the returned URL in Javascript. If you create an image, set its src to the URL, and then in onload create a canvas, size it, draw the image to it, and extract the base64 with toDataURL. See code:

        navigator.contacts.find(['displayName', 'photos'],
          function(contacts) {
            console.log('Found ' + contacts.length + ' contacts.');
            for (var i = 0; i < contacts.length; i++) {
              if (contacts[i].photos) {
                for (var j = 0; j < contacts[i].photos.length; j++) {
                  var img = new Image();
                  img.onload = function() {
                    var canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0);
                    try {
                      var data = canvas.toDataURL("image/png");
                      // data == "data:image/png;base64,BASE64_DATA_HERE..."
                    } catch(e) {
                      console.log('toDataUrl failed: ' + e);
                    }
                  };
        
                  try {
                    console.log('trying to set img.src to ' + contacts[i].photos[j].value);
                    img.src = contacts[i].photos[j].value;
                    console.log('img.src = ' + img.src);
                  } catch (e) {
                    console.log('failed to load image: ' + e);
                  }
                }
              }
            }
          }, function(err) {
            alert(err);
          });
        
        Show
        Braden Shepherdson added a comment - Base64 image data may be obtained from the returned URL in Javascript. If you create an image, set its src to the URL, and then in onload create a canvas, size it, draw the image to it, and extract the base64 with toDataURL. See code: navigator.contacts.find(['displayName', 'photos'], function (contacts) { console.log('Found ' + contacts.length + ' contacts.'); for ( var i = 0; i < contacts.length; i++) { if (contacts[i].photos) { for ( var j = 0; j < contacts[i].photos.length; j++) { var img = new Image(); img.onload = function () { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); try { var data = canvas.toDataURL("image/png"); // data == "data:image/png;base64,BASE64_DATA_HERE..." } catch (e) { console.log('toDataUrl failed: ' + e); } }; try { console.log('trying to set img.src to ' + contacts[i].photos[j].value); img.src = contacts[i].photos[j].value; console.log('img.src = ' + img.src); } catch (e) { console.log('failed to load image: ' + e); } } } } }, function (err) { alert(err); });
        Hide
        Simon MacDonald added a comment -

        The URI returned in contact[0].photos[0].value is a content:// URI. It is perfectly okay to set the value of img.src to this URI and Android will display it. If you pass the URI to window.resolveLocalFileSystemURI it will fail as it only queries the media store DB while contact photos are stored elsewhere.

        Even if we query the right DB it may be a problem as the thumbnail is stored as a base64 encoded data and it may or may not have a pointer to the actual 'file' where the image data is stored.

        Show
        Simon MacDonald added a comment - The URI returned in contact [0] .photos [0] .value is a content:// URI. It is perfectly okay to set the value of img.src to this URI and Android will display it. If you pass the URI to window.resolveLocalFileSystemURI it will fail as it only queries the media store DB while contact photos are stored elsewhere. Even if we query the right DB it may be a problem as the thumbnail is stored as a base64 encoded data and it may or may not have a pointer to the actual 'file' where the image data is stored.

          People

          • Assignee:
            Joe Bowser
            Reporter:
            Paul Davis
          • Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development