From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/es/web/guide/api/camera/index.html | 244 ------------------------------- 1 file changed, 244 deletions(-) delete mode 100644 files/es/web/guide/api/camera/index.html (limited to 'files/es/web/guide/api') diff --git a/files/es/web/guide/api/camera/index.html b/files/es/web/guide/api/camera/index.html deleted file mode 100644 index e3d291bfc3..0000000000 --- a/files/es/web/guide/api/camera/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Introducción a la API de Cámara -slug: Web/Guide/API/Camera -tags: - - DOM - - Intermedio - - Medios - - NecesitaActualización - - Referencia DOM Gecko - - Web API - - cámara -translation_of: Archive/B2G_OS/API/Camera_API/Introduction ---- -

Mediante la API de Cámara, es posible tomar fotografías con la cámara de su dispositivo y subirlas a una página web. Esto se logra a través de un elemento input con los atributos type="file" y accept para declarar que el elemento acepta imágenes. El HTML se parece a esto:

- -
<input type="file" id="take-picture" accept="image/*">
-
- -

Cuando los usuarios eligen activar este elemento HTML, se les presenta la opción de seleccionar un fichero, donde la cámara del dispositivo es una de las opciones. Si seleccionan la cámara, se accede al modo de toma de fotografía. Tras realizar la fotografía, al usuario se le presenta la posibilidad de aceptarla o rechazarla. Si se acepta, es enviada al elemento <input type="file"> y se lanza su evento onchange.

- -

Obtener una referencia a la fotografía tomada

- -

Con la ayuda de la API de Fichero usted puede acceder a la fotografía tomada o el fichero elegido:

- -
var takePicture = document.querySelector("#take-picture");
-takePicture.onchange = function (event) {
-    // Obtener una referencia a la fotografía tomada o fichero seleccionado
-    var files = event.target.files,
-        file;
-    if (files && files.length > 0) {
-        file = files[0];
-    }
-};
-
- -

Presentando la fotografía en la página web

- -

Una vez que tiene una referencia a la fotografía tomada (ej.: fichero), puede entonces usar {{ domxref("window.URL.createObjectURL()") }} para crear una URL referenciando la fotografía y estableciéndola como src de una imagen:

- -
// Referencia de la imagen
-var showPicture = document.querySelector("#show-picture");
-
-// Crear ObjectURL
-var imgURL = window.URL.createObjectURL(file);
-
-// Establecer ObjectURL como img src
-showPicture.src = imgURL;
-
-// Por razones de rendimiento, revocar los ObjectURL usados
-URL.revokeObjectURL(imgURL);
-
- -

Si createObjectURL() no es soportado, una alternativa es retroceder a {{ domxref("FileReader") }}:

- -
// Retroceder a FileReader si createObjectURL no está soportado
-var fileReader = new FileReader();
-fileReader.onload = function (event) {
-    showPicture.src = event.target.result;
-};
-fileReader.readAsDataURL(file);
-
- -

Ejemplo completo

- -

Si desea verlo en acción, eche un vistazo al ejemplo completo de la API de Cámara funcionando.

- -

Aquí está el código usado para esa demostración:

- -

Página HTML

- -
<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Camera API</title>
-        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
-    </head>
-
-    <body>
-
-        <div class="container">
-            <h1>Camera API</h1>
-
-            <section class="main-content">
-                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
-
-                <p>
-                    <input type="file" id="take-picture" accept="image/*">
-                </p>
-
-                <h2>Preview:</h2>
-                <p>
-                    <img src="about:blank" alt="" id="show-picture">
-                </p>
-
-                <p id="error"></p>
-
-            </section>
-
-            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
-        </div>
-
-
-        <script src="js/base.js"></script>
-
-
-    </body>
-</html>
-
- -

Fichero JavaScript

- -
(function () {
-    var takePicture = document.querySelector("#take-picture"),
-        showPicture = document.querySelector("#show-picture");
-
-    if (takePicture && showPicture) {
-        // Establecer eventos
-        takePicture.onchange = function (event) {
-            // Obtener una referencia a la fotografía tomada o fichero seleccionado
-            var files = event.target.files,
-                file;
-            if (files && files.length > 0) {
-                file = files[0];
-                try {
-                    // Crear ObjectURL
-                    var imgURL = window.URL.createObjectURL(file);
-
-                    // Establecer ObjectURL como img src
-                    showPicture.src = imgURL;
-
-                    // Revocar ObjectURL
-                    URL.revokeObjectURL(imgURL);
-                }
-                catch (e) {
-                    try {
-                        // Regresar a FileReader si createObjectURL no está soportado
-                        var fileReader = new FileReader();
-                        fileReader.onload = function (event) {
-                            showPicture.src = event.target.result;
-                        };
-                        fileReader.readAsDataURL(file);
-                    }
-                    catch (e) {
-                        //
-                        var error = document.querySelector("#error");
-                        if (error) {
-                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
-                        }
-                    }
-                }
-            }
-        };
-    }
-})();
-
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Camera API{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
createObjectURL()16{{CompatGeckoDesktop("8.0")}}10+{{CompatNo()}}{{CompatNo()}}
{{domxref("FileReader")}}16{{CompatGeckoDesktop("1.9.2")}}10+11.6+{{CompatNo()}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Camera API3.0{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("10.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
createObjectURL()4{{CompatVersionUnknown()}}{{CompatGeckoMobile("10.0")}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("FileReader")}}3{{CompatVersionUnknown()}}{{CompatGeckoMobile("10.0")}}{{CompatNo()}}11.1{{CompatNo()}}
-
- -

 

-- cgit v1.2.3-54-g00ecf