Disegno su tela L'immagine non disegna in Cordova, problema di sicurezza?

Question

Voglio disegnare un'immagine su tela all'interno di un'app Cordova.

Quando il percorso dell'immagine si trova all'interno della directory www della mia app, il disegno funziona come previsto. Tuttavia, se l'immagine viene creata dalla videocamera Cordova e viene quindi memorizzata in ../../tmp in relazione alla directory www, la drawImage(...) produce un'immagine nera.

Questo potrebbe essere un problema di sicurezza, poiché il codice sorgente dell'applicazione si trova nella directory www, ma le immagini non lo sono. D'altra parte, un tag <img> può mostrare queste immagini senza problemi.

Il problema è davvero un problema di sicurezza? E cosa posso fare per risolverlo, cioè non produrre un'immagine nera?

Answer 1

Dopo aver provato una quantità infinita di cose : Il problema era semplicemente che l'immagine che volevo usare con drawImage() era troppo alta risoluzione. L'abbassamento della risoluzione ha fatto sparire il problema: la tela non è più nera ... (quindi non è un problema di sicurezza)

Answer 2

Sembra che si stia tentando di accedere all'immagine direttamente tramite il file system. Si vuole utilizzare l'API Cordova per il recupero delle immagini

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

Vedi l'esempio completo per il recupero

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