Canvas drawImage not drawing in Cordoba, is there a security problem?

Question

I want to draw an image on canvas in the Cordova application.

When the image path is in the www directory of my application, the image works as expected. However, if the image was taken by the Cordoba camera and thus saved to ../../tmp with respect to the www directory, drawImage(...) creates a black image.

This could be a security issue because the source code for the application is in the www directory, but there are no images. On the other hand, the <img> can display these images without problems.

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

Answer 1

After trying an infinite amount of things: The problem was that the image I wanted to use with drawImage() was too high. Decreasing the resolution made the problem disappear: the canvas is no longer black ... (so there is a security problem)

Answer 2

It looks like you are trying to access the image directly through the file system. Do you want to use the Cordoba API to extract images

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

See full example for extracting

 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="" />