From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/guide/api/camera/index.html | 220 ++++++++++++++++++++++++++++ files/pt-br/web/guide/api/index.html | 26 ++++ 2 files changed, 246 insertions(+) create mode 100644 files/pt-br/web/guide/api/camera/index.html create mode 100644 files/pt-br/web/guide/api/index.html (limited to 'files/pt-br/web/guide/api') diff --git a/files/pt-br/web/guide/api/camera/index.html b/files/pt-br/web/guide/api/camera/index.html new file mode 100644 index 0000000000..c5350e2f82 --- /dev/null +++ b/files/pt-br/web/guide/api/camera/index.html @@ -0,0 +1,220 @@ +--- +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()}}
+
+

 

diff --git a/files/pt-br/web/guide/api/index.html b/files/pt-br/web/guide/api/index.html new file mode 100644 index 0000000000..4e0e34c483 --- /dev/null +++ b/files/pt-br/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf