0

necesito algo de ayuda. Estoydesarrollando una pequeña aplicación con cordova y Android Studio en la que debo tomar un foto con la que cámara y mostrarla por pantalla en una etiqueta img, además he añadido la opción de poder elegir una foto de la galeria. Para ello, he incluido el plugin cordova-plugin-camera. Parece que todo funciona correctamente, excepto que no se visuaiza la imagen, solo aparece el icono de imagen donde tendría que aparecer la foto seleccionada. He probado muchas cosas e incluso he modificado la etiqueta por si el error estuviera aqui, pero no hay forma de que se muestre la imagen. Os paso el codigo que estoy utilizando a ver si alguien me puede echar un cable: Este es mi archivo HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval' *; script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * 'self' data: content:; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="jquerymobile/jquery.mobile-1.4.5.min.css"/>
        <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="jquerymobile/jquery.mobile-1.4.5.min.js"></script>
         <title>Hello World</title>
    </head>
    <body>
     <div data-role="page" id="pagina_fotos">
            <div data-role="header">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#pagina_mapa">Mapa</a> </li>
                        <li><a href="#pagina_iframe">Buscador</a> </li>
                        <li><a href="#pagina_fotos">Foto</a> </li>
                    </ul>
                </div>
            </div>
            <div data-role="main" class="ui-content">
                <div id="boton">
                    <button id="btnFoto" value="foto">Hacer Foto</button>
                    <button id="verFoto" value="vfoto">Ver Fotos</button>
                </div>

                <img id="imagen" src="" width="100%" height="100%"/>

            </div>
            <div data-role="footer" data-position="fixed" data-inline="true">
                <p>Footer</p>
            </div>
        </div>  
     <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

Y este es mi index.js:

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById("btnFoto").addEventListener('click', getPhoto, false);
    document.getElementById("verFoto").addEventListener('click', getVerfoto, false);
}
function getVerfoto () {

    var opts = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        saveToPhotoAlbum: true,
        correctOrientation: true
        };
        navigator.camera.getPicture(cameraSuccess, cameraError, opts);
}

function getPhoto () {
    navigator.camera.getPicture(cameraSuccess, cameraError, { quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, saveToPhotoAlbum: true, encodingType: Camera.EncodingType.JPEG});
}

function cameraSuccess (imageURI) {
    var image = document.getElementById('imagen');
    image.src = imageURI;
}

function cameraError (message) {
    alert('Ha fallado porque:' + message);
}

1 respuesta 1

-1

Remplaza en tu código con estas líneas:

destinationType: Camera.DestinationType.DATA_URL
image.src = "data:image/jpeg;base64," + imageData

Esto obtiene los datos de la cámara (codificados en base64) y los pone como fuente de la imagen como un data URI (indicando que es una imagen JPG formateada en base64).

1
  • 1
    Saludos, es genial que quieras aportar, aunque seria mucho mejor si das una breve explicación de lo que hace tu código, considera que los usuarios nuevos con poca experiencia no entenderán tu respuesta, por favor lee cómo responder, también te invito a hacer el recorrido y así obtener tu primera medalla. ;)
    – Israel-ICM
    Commented el 16 nov. 2022 a las 13:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.