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/pt-br/web/guide/api/camera/index.html | 220 ---------------------------- 1 file changed, 220 deletions(-) delete mode 100644 files/pt-br/web/guide/api/camera/index.html (limited to 'files/pt-br/web/guide/api/camera') diff --git a/files/pt-br/web/guide/api/camera/index.html b/files/pt-br/web/guide/api/camera/index.html deleted file mode 100644 index c5350e2f82..0000000000 --- a/files/pt-br/web/guide/api/camera/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Introdução da API de Câmera -slug: Web/Guide/API/Camera -translation_of: Archive/B2G_OS/API/Camera_API/Introduction ---- -

Através  da Camera API, é possivel tirar fotos com a câmera de seu dispositivo e enviá-las para a atual página da web. Isso é obtido pelo elemento input com type="file" e um atributo accept para declarar que aceita imagens. O HTML se parece com esse:

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

Quando usuários escolhem ativar esse elemento HTML, é apresentado a eles uma opção para escolher um arquivo, onde a câmera do dispositivo é uma das opções. Se selecionarem a câmera, entrará no modo de captura de imagem. Depois que a imagem for tirada, será apresentada a escolha de aceita-lá ou descartar-lá. Se aceita, será enviada ao elemento <input type="file"> e isso acionará o evento onchange.

-

Obter uma referencia para a foto tirada

-

Com a ajuda da File API você pode acessar a imagem capturada ou escolher um arquivo:

-
var takePicture = document.querySelector("#take-picture");
-takePicture.onchange = function (event) {
-    // Obtenha uma referencia para a imagem capturada ou escolha um arquivo
-    var files = event.target.files,
-        file;
-    if (files && files.length > 0) {
-        file = files[0];
-    }
-};
-
-

Mostrando a imagem na página web

-

Uma vez que você tem a referencia da imagem capturada (i.e., arquivo), você pode usar {{ domxref("window.URL.createObjectURL()") }} para criar uma URL referenciando a foto e configurando como o src de uma imagem:

-
// Image reference
-var showPicture = document.querySelector("#show-picture");
-
-// Get window.URL object
-var URL = window.URL || window.webkitURL;
-
-// Create ObjectURL
-var imgURL = URL.createObjectURL(file);
-
-// Set img src to ObjectURL
-showPicture.src = imgURL;
-
-// For performance reasons, revoke used ObjectURLs
-URL.revokeObjectURL(imgURL);
-
-

Se createObjectURL() não é suportado, uma alternativa é voltar ao {{ domxref("FileReader") }}:

-
// Fallback if createObjectURL is not supported
-var fileReader = new FileReader();
-fileReader.onload = function (event) {
-    showPicture.src = event.target.result;
-};
-fileReader.readAsDataURL(file);
-
-

Exemplo Completo

-

Se você quiser ver isso em ação, dê uma olhada em complete working Camera API example.

-

Aqui está o código usado nessa demo:

-

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>
-
-

Arquivo JavaScript

-
(function () {
-    var takePicture = document.querySelector("#take-picture"),
-        showPicture = document.querySelector("#show-picture");
-
-    if (takePicture && showPicture) {
-        // Set events
-        takePicture.onchange = function (event) {
-            // Get a reference to the taken picture or chosen file
-            var files = event.target.files,
-                file;
-            if (files && files.length > 0) {
-                file = files[0];
-                try {
-                    // Get window.URL object
-                    var URL = window.URL || window.webkitURL;
-
-                    // Create ObjectURL
-                    var imgURL = URL.createObjectURL(file);
-
-                    // Set img src to ObjectURL
-                    showPicture.src = imgURL;
-
-                    // Revoke ObjectURL
-                    URL.revokeObjectURL(imgURL);
-                }
-                catch (e) {
-                    try {
-                        // Fallback if createObjectURL is not supported
-                        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";
-                        }
-                    }
-                }
-            }
-        };
-    }
-})();
-
-

Compatibilidade dos 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