{"id":1785,"date":"2023-02-17T11:09:02","date_gmt":"2023-02-17T11:09:02","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1785"},"modified":"2023-02-17T11:09:02","modified_gmt":"2023-02-17T11:09:02","slug":"qr-code-reader","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/es\/qr-code-reader\/","title":{"rendered":"QR Code Reader"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><h1>QR Code Reader<\/h1>\n      \n <div class=\"ml-2\">\n                <span data-toggle=\"tooltip\" title=\"Upload a QR code image and extract the data out of it.\">\n                    \n                <\/span>\n            <\/div>\n        \n    <div class=\"card\">\n        <div class=\"card-body\">\n\n            <form action=\"\" method=\"post\" role=\"form\" enctype=\"multipart\/form-data\" data-trp-original-action=\"\">\n                <input type=\"hidden\" name=\"token\" value=\"7712c98b496620fac89bc01c3f61e527\">\n\n                <div class=\"form-group\">\n                    <label for=\"image\"><i class=\"fa fa-fw fa-qrcode fa-sm text-muted mr-1\"><\/i> Image<\/label>\n                    <input type=\"file\" id=\"image\" name=\"image\" accept=\".png, .jpg, .jpeg, .svg, .webp\" class=\"form-control-file altum-file-input\" required=\"required\">\n                                    <\/div>\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\n\n        <\/div>\n    <\/div>\n\n    <div class=\"mt-4\">\n        <div class=\"card\">\n            <div class=\"card-body\">\n\n                <div class=\"form-group\">\n                    <div class=\"d-flex justify-content-between align-items-center\">\n                        <label for=\"result\">Data<\/label>\n                        <div>\n                            <button type=\"button\" class=\"btn btn-link text-muted\" data-toggle=\"tooltip\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\" data-copy=\"Copy to clipboard\" data-copied=\"Copied!\" data-clipboard-target=\"#result\" data-clipboard-text=\"\">\n                                Copy\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                    <textarea id=\"result\" class=\"form-control\"><\/textarea>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<script>\n    \/* Some global variables *\/\n    window.altum = {};\n    let global_token = document.querySelector('input[name=\"global_token\"]').value;\n    let site_url = document.querySelector('input[name=\"global_site_url\"]').value;\n    let url = document.querySelector('input[name=\"global_url\"]').value;\n    let decimal_point = document.querySelector('[name=\"global_number_decimal_point\"]').value;\n    let thousands_separator = document.querySelector('[name=\"global_number_thousands_separator\"]').value;\n<\/script>\n\n                    \n                    <script src=\"https:\/\/66toolkit.com\/demo\/themes\/altum\/assets\/js\/custom.js?v=1100\"><\/script>\n                   \n        \n        <script src=\"https:\/\/66toolkit.com\/demo\/themes\/altum\/assets\/js\/libraries\/clipboard.min.js\"><\/script>\n\n<script>\n    'use strict';\n\n    let clipboard = new ClipboardJS('[data-clipboard-text]');\n\n    \/* Copy full url handler *\/\n    $('[data-clipboard-text]').on('click', event => {\n        let copy = event.currentTarget.dataset.copy;\n        let copied = event.currentTarget.dataset.copied;\n\n        $(event.currentTarget).attr('data-original-title', copied).tooltip('show');\n\n        setTimeout(() => {\n            $(event.currentTarget).attr('data-original-title', copy);\n        }, 500);\n    });\n<\/script>\n    <script src=\"https:\/\/66toolkit.com\/demo\/themes\/altum\/assets\/js\/libraries\/html5-qrcode.min.js\"><\/script>\n\n    <script>\n        'use strict';\n        const html5QrCode = new Html5Qrcode('image');\n\n        const image = document.getElementById('image');\n        image.addEventListener('change', event => {\n            const file = image.files[0];\n\n            if(!file) {\n                return;\n            }\n\n            html5QrCode.scanFile(file, true)\n                .then(decodedText => {\n                    document.querySelector('#result').value = decodedText;\n                })\n                .catch(err => {\n                    document.querySelector('#result').value = \"No data found.\";\n                });\n        });\n    <\/script>\n<script src=\"https:\/\/66toolkit.com\/demo\/themes\/altum\/assets\/js\/libraries\/clipboard.min.js\"><\/script>\n\n<script>\n    'use strict';\n\n    let clipboard = new ClipboardJS('[data-clipboard-text]');\n\n    \/* Copy full url handler *\/\n    $('[data-clipboard-text]').on('click', event => {\n        let copy = event.currentTarget.dataset.copy;\n        let copied = event.currentTarget.dataset.copied;\n\n        $(event.currentTarget).attr('data-original-title', copied).tooltip('show');\n\n        setTimeout(() => {\n            $(event.currentTarget).attr('data-original-title', copy);\n        }, 500);\n    });\n<\/script>\n<script>\n    document.querySelector('#switch_theme_style').addEventListener('click', event => {\n        let theme_style = document.querySelector('body[data-theme-style]').getAttribute('data-theme-style');\n        let new_theme_style = theme_style == 'light' ? 'dark' : 'light';\n\n        \/* Set a cookie with the new theme style *\/\n        set_cookie('theme_style', new_theme_style, 30, \"\\\/demo\\\/\");\n\n        \/* Change the css and button on the page *\/\n        let css = document.querySelector(`#css_theme_style`);\n\n        document.querySelector(`body[data-theme-style]`).setAttribute('data-theme-style', new_theme_style);\n\n        switch(new_theme_style) {\n            case 'dark':\n                css.setAttribute('href', \"https:\\\/\\\/66toolkit.com\\\/demo\\\/themes\\\/altum\\\/assets\\\/css\\\/bootstrap-dark.min.css?v=1100\");\n                document.body.classList.add('c_darkmode');\n                break;\n\n            case 'light':\n                css.setAttribute('href', \"https:\\\/\\\/66toolkit.com\\\/demo\\\/themes\\\/altum\\\/assets\\\/css\\\/bootstrap.min.css?v=1100\");\n                document.body.classList.remove('c_darkmode');\n                break;\n        }\n\n        \/* Refresh the logo\/title *\/\n        document.querySelectorAll('[data-logo]').forEach(element => {\n            let new_brand_value = element.getAttribute(`data-${new_theme_style}-value`);\n            let new_brand_class = element.getAttribute(`data-${new_theme_style}-class`);\n            let new_brand_html = (new_brand_value.includes('http:\/\/') || new_brand_value.includes('https:\/\/')) ? `<img decoding=\"async\" src=\"${new_brand_value}\" class=\"${new_brand_class}\" alt=\"Website Logo\" \/>` : `<span class=\"${new_brand_class}\">${new_brand_value}<\/span>`;\n            element.innerHTML = new_brand_html;\n        });\n\n\n        document.querySelector(`#switch_theme_style`).setAttribute('data-original-title', document.querySelector(`#switch_theme_style`).getAttribute(`data-title-theme-style-${theme_style}`));\n        document.querySelector(`#switch_theme_style [data-theme-style=\"${new_theme_style}\"]`).classList.remove('d-none');\n        document.querySelector(`#switch_theme_style [data-theme-style=\"${theme_style}\"]`).classList.add('d-none');\n        $(`#switch_theme_style`).tooltip('hide').tooltip('show');\n\n        event.preventDefault();\n    });\n<\/script>\n    \n<style>\n\nbody{text-align:center}\n\n\/* Button Styles *\/\nbutton, .button, #button, btn, .btn, #btn, downloadlink,  #download-button, #button-copy, button-copy, copy-button, #copy-button, #copy, copy, #download-html-button{\n  display: inline-block;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 30px;\n  background-image: linear-gradient(to right, #0088FF, #0088FF);\n  border: 3px solid #fff;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  margin:0 auto;\n  margin-top:11px;\n  margin-bottom:11px;\n  text-shadow: 2px 2px 4px #333;\n}\n\n\/* Button Hover State *\/\nbutton:hover {\n  background-image: linear-gradient(to right, #FF1493, #FF1493);\n  border: 3px solid #ffffff;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n \ninput[type=file]::file-selector-button {\n  display: inline-block;\n  padding: 1.0rem 1rem;\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: #fff;\n  text-align: center;\n  text-transform: uppercase;\n  background-color: #0088FF;\n  border-radius: 0rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n  border: 0px solid #fff;\n  width:100%;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n}\n\ninput[type=file]::file-selector-button:hover {\n  background-color: #5b52d6;\n}\n\ninput[type=file]::file-selector-button:active {\n  background-color: #4a41ad;\n}\n\ninput[type=file]::file-selector-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c63ff;\n}\n\ninput[type=file]::file-selector-button::before {\n  content: \"Select File\";\n}\n\ninput[type=file]::file-selector-button::before,\ninput[type=file]::file-selector-button::before {\n  content: \"\\2193 Browse Files\";\n}\n\n\ninput[type=\"file\"] {\n  display: yes;\n}\n\ntextarea {\n  width: 100%;\n  height: 170px;\n  padding: 10px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ntextarea:hover {\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\n\n#image-container img {\n  max-width: 100%;\n  }\n\ncode, pre, .result, output, #output, .output {\n  font-family: Monaco, Consolas, \"Andale Mono\", \"DejaVu Sans Mono\", monospace;\n  font-size: 0.9em;\n  color: #333;\n  background-color: #f9f9f9;\n  padding: 0.2em 0.4em;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  white-space: pre-wrap;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n  width:100%;\n  padding:15px;\n\n}\n\n\ninput[type=\"range\"] {\n  -webkit-appearance: none;\n  width: 80%;\n  background: transparent;\n  height: 10px;\n  border-radius: 5px;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: inset 0 0 5px #333;\n  transition: box-shadow 0.2s;\n  margin-top:10px;\n\n}\n\ninput[type=\"range\"]:focus {\n  box-shadow: inset 0 0 5px #888;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  background: #4CAF50;\n  cursor: pointer;\n  transition: background 0.2s;\n  margin-top:-5px;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n  background: #3e8e41;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  background: #ddd;\n  border-radius: 5px;\n  border: none;\n}\ninput[type=\"checkbox\"] {\n  appearance: none;\n  width: 45px;\n  height: 25px;\n  background: transparent;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;  border-radius: 5px;\n  margin: 10px;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n}\n\ninput[type=\"checkbox\"]:before {\n  content: \"\";\n  width: 15px;\n  height: 15px;\n  background: #D209A4;\n  border-radius: 100px;\n  position: absolute;\n  left: 2px;\n  \n  top: 3px;\n  transition: all 0.2s;\n}\n\ninput[type=\"checkbox\"]:checked:before {\n  transform: translateX(20px);\n}\n\ninput[type=\"checkbox\"]:focus {\n  border: 2px solid #888;\n}\ninput[type=\"radio\"] {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #333;\n  margin-right: 10px;\n  outline: none;\n  position: relative;\n  cursor: pointer;\n}\n\ninput[type=\"radio\"]:after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #333;\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  opacity: 0;\n  transition: all 0.2s;\n}\n\ninput[type=\"radio\"]:checked:after {\n  opacity: 1;\n}\n\ninput[type=\"radio\"]:focus {\n  border-color: #888;\n}\n\n\ninput[type=\"radio\"] {\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n}\n\nlabel {\n  display: block; \/* makes each label appear on a new line *\/\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 5px; \/* adds a small gap below each label *\/\n  color:#55555e;\n  margin-top:11px;margin-bottom:11px;\n}\n\ninput[type=\"color\"]{width:17.2%;}\n\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>QR Code Reader Image Data Copy<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1785","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/es\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/comments?post=1785"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/1785\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/media?parent=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}