DrawImage Canvas nie rysuje się w Cordova, kwestia bezpieczeństwa?

Question

Chcę narysować obrazek na płótnie w aplikacji Cordova.

Kiedy ścieżka obraz jest w moim katalogu aplikacji www prace rysunkowe, jak oczekiwano. Jednakże, jeśli obraz jest wykonany przez kamerę Cordova, a więc jest przechowywany w ../../tmp w stosunku do katalogu www The drawImage(...) produkuje czarny obraz.

Może to być problem związany z bezpieczeństwem, ponieważ kod źródłowy aplikacji znajduje się w katalogu www, ale obrazy nie są. Z drugiej strony, znacznik <img> może wyświetlać te obrazy bez problemu.

Czy problem naprawdę kwestia bezpieczeństwa? I co mogę zrobić, aby go rozwiązać, tj. Nie tworzyć czarnego obrazu?

Answer 1

Po wypróbowaniu nieskończoną ilość rzeczy : Problem polegał na tym, że obraz, który chciałem użyć z drawImage(), był zbyt wysoki. Obniżenie rozdzielczości sprawiło, że problem zniknął: płótno nie jest już czarne ... (więc nie jest to problem z bezpieczeństwem)

Answer 2

Brzmi jak próbujesz uzyskać dostęp do obrazu bezpośrednio poprzez system plików. Będziemy chcieli, aby korzystać z interfejsu API Cordova do pobierania obrazów

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

Zobacz pełną przykład do pobierania

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