Canvas drawImage не рисует в Кордове, проблема безопасности?

Question

Я хочу нарисовать изображение на холсте в приложении Cordova.

Когда путь изображения находится в директории моего приложения www, рисунок работает должным образом. Однако, если изображение сделано камерой Кордовы и поэтому хранится в ../../tmp по отношению к каталогу www, то drawImage(...) создает черное изображение.

Это может быть проблема с безопасностью, поскольку исходный код приложения находится в каталоге www, но изображений нет. С другой стороны, тег <img> может показывать эти изображения без проблем.

Является ли проблема действительно проблемой безопасности? И что я могу сделать, чтобы решить проблему, т. Е. Не создать черную картинку?

Answer 1

осля бесконечного количества вещей : Проблема заключалась в том, что изображение, которое я хотел использовать с drawImage(), было слишком высоким. Снижение разрешения заставило проблему исчезнуть: холст больше не черный ... (поэтому не проблема безопасности)

Answer 2

Похоже, вы пытаетесь получить доступ к изображению непосредственно через файловую систему. Вы хотите использовать API Кордовы для получения изображений

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

Смотрите полный пример для получения

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