Canvas drawImage does not draw in Cordova, security issue?

Question

I want to draw an image to canvas within a Cordova app.

When the image path is within the www directory of my app, the drawing works as expected. However, if the image is made by the Cordova camera and is thus stored in ../../tmp in relation to the www directory, the drawImage(...) produces a black picture.

This might be a security issue, since the app's source code is found in the www directory, but the images are not. On the other hand, an <img> tag can show these images without a problem.

Is the problem really a security issue? And what can I do to solve it, i.e. to not produce a black picture?

Kalmar

Answer 1

After trying out an endless amount of things: The problem was simply that the image which I wanted to use with drawImage() was too high res. Lowering the resolution made the problem disappear: the canvas is not black anymore... (so not a security issue)

Kalmar

Answer 2

It sounds like you are trying to access the image directly through the file system. You will want to use the Cordova API for retrieving the images

http://cordova.apache.org/docs/en/2.5.0/cordova_camera_camera.md.html#camera.getPicture

See the full example for retrieving

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64 encoded image data
  // console.log(imageData);

  // Get image handle
  //
  var smallImage = document.getElementById('smallImage');

  // Unhide image elements
  //
  smallImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  // Uncomment to view the image file URI 
  // console.log(imageURI);

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
  largeImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  largeImage.src = imageURI;
}


// A button will call this function
//
function getPhoto(source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
// 
function onFail(message) {
  alert('Failed because: ' + message);
}

HTML

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />

Operose