Question

I am having problems trying to obtain a dataUrl for an image taken with the camera using code similar to that used in the sample ‘How to build a location-based hybrid mobile app with reverse geocoding’. I’m testing the code on a Samsung Galaxy S2 with Android 2.3.5.

The code I’m using to get the dataUrl is pretty standard javascript:

var toDataURL = function toDataURL(uri, callback)
{
    forge.logging.log('toDataURL...');
    forge.logging.log(uri);
    var image = document.createElement('img');
    image.src = uri;
    image.onload = function ()
    {
        forge.logging.log('toDataURL image.onload...');

        // create canvas
        var canvas = document.createElement('canvas');
        canvas.id = 'canvas';
        canvas.width = image.width;
        canvas.height = image.height;

        var context = canvas.getContext('2d');

        // draw image to canvas
        context.drawImage(image, 0, 0, image.width, image.height, 0, 0,  canvas.width,  canvas.height);

        // get data url 
        var dataUrl = canvas.toDataURL();
        callback(dataUrl);
        forge.logging.log('...toDataURL image.onload');
    };
    forge.logging.log('...toDataURL');
};

The problem is that the dataUrl returned by canvas.toDataURL is always empty (‘data:,’). The uri passed as a parameter is logged as:

I/Forge (18019): [FORGE] ‘content://io.trigger.forgeb6367d6ee13011e1b9ed12313d1adcbe/file___height=640&type=image&uri=content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F44%23Intent%3Bend&width=480&name=Image’

which is returned from a call to forge.file.URL with parameter:

D/Forge (18019): Native call “file.URL” with task.params: {“uri”:”content://media/external/images/media/45#Intent;end”,”name”:”Image”,”type”:”image”,”width”:480,”height”:640}

Presumably this is something to do with permissions. My question is, what do I have to do to get the code to work? Or is there an alternative approach to getting the content of a file taken with the camera? (My aim is to send the content of the photo to a web service.)

Answer 1

I’ll take a proper look at the code to try to recreate here – thanks for the snippet – but in the meantime there might be a simpler solution.

If all you need to do is display the image to the user then upload it to a web service, you can just use file.getImage, file.URL and request.ajax. Cobbled together from code here and here:

forge.file.getImage({width: 300, height: 300}, function (file) {
  // Get a URL to the returned file object which can be used from the local webview.
  forge.file.URL(file, function (url) {
    document.getElementById('img').src = url;
  });
  forge.request.ajax({
    url: "http://example.com/file_upload",
    files: [file]
  });
});

Would that work for you?