Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 20
Tutorial para Gerar um QR Code

Nesse tutorial vamos entender como criar um Gerador de QR Code usando HTML, CSS e jQuery com a ajuda de v�rios exemplos.
Mas, o que � um gerador de QR Code?
QR Code Generator � uma ferramenta que serve para gerar diferentes tipos de QR Codes dependendo da finalidade, j� que podemos criar QR Codes para abrir um site, visualizar um arquivo PDF, ouvir m�sica, assistir v�deos do Youtube, armazenar arquivos de imagem, conectar a uma rede Wi-Fi, etc. Para gerar um c�digo QR, devemos saber o tipo de conte�do que voc� est� usando.
Exemplo 1:
Nesse exemplo voc� poder� digitar qualquer conte�do da caixa de texto, tais como: um site, um v�deo do Youtube, o link de uma imagem etc. Em seguida, clique no bot�o 'Gerar QR Code' para gerar o c�digo. Depois � s� utilizar um aplicativo para ler o c�digo:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie=edge"> <title>Exemplo de Gerador de QR Code</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <style> .qr-code { max-width: 100px; margin: 10px; } body { background-color: yellow; justify-content: center; font-family: 'VT323', monospace; font-size: 1.5rem; color: red; margin: 20px; text-align: center; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; text-align: center; } h3 { text-align: center; color: #46a294; font-size: 20px; width: 100%; margin: 15 15; position: relative; font-weight: 400; } h2 { text-align: center; color: blue; font-size: 28px; width: 100%; margin: 10px 10; position: relative; line-height: 58px; font-weight: 400; } h2:before { content: " "; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; font-weight: bold; background-color: #2079df; margin-left: -50px; } button.center-block { margin-top: 10px; display: block; width: 22%; line-height: 2em; background: rgba(114,212,255,1); border-radius: 5px; border: 0; border-top: 1px solid #B2ECE6; box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389; color: #0000FF; font-size: 1.1em; text-align: center; text-shadow: 0 1px 2px #21756A; } button.center-block:hover { background: linear-gradient(to bottom, rgba(147,255,186,1) 0%,rgba(57,175,154,1) 100%); } button.center-block:active { box-shadow: inset 0 0 5px #000; background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); } button.center-block:focus { outline: none; border-color: blue; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Exemplo 1</h1> <h2>Gerador de QR Code</h2> <div class = "container-fluid"> <div class = "text-center"> <img src = "https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160x160&chld=L|0" class = "qr-code img-thumbnail img-responsive" /> </div> <div class = "form-horizontal"> <div class = "form-group"> <label class = "control-label col-sm-2" for = "content"> <h3>Conte�do:</h3> </label> <div class = "col-sm-10"> <input type = "text" size = "20" maxlength = "50" class = "form-control" id = "content" placeholder = "Digite o conte�do"/> </div> </div> <div class = "form-group"> <div class = "col-sm-offset-2 col-sm-10"> <button type = "button" class = "center-block" id = "generate">Gerar QR Code</button> </div> </div> </div> </div> <script src = "https://code.jquery.com/jquery-3.5.1.js"> </script> <script> function htmlEncode(value) { return $('<div/>').text(value) .html(); } $(function () { $('#generate').click(function () { let finalURL = 'https://chart.googleapis.com/chart?cht=qr&chl=' + htmlEncode($('#content').val()) + '&chs=160x160&chld=L|0' $('.qr-code').attr('src', finalURL); }); }); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 2:
Nesse exemplo criamos um c�digo QR passando um valor na caixa de conte�do. Com o uso do valor definido na caixa de conte�do, geramos um QR code, e ap�s gerar um QR code, tamb�m temos a op��o de download. Podemos baixar um c�digo QR como uma imagem em seu sistema. Podemos alterar o nome da imagem usando o seguinte c�digo.
Download
<!DOCTYPE html> <html lang="en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie=edge"> <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet"> <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.js"> </script> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script> <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin = "anonymous"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"> </script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> <title>Exemplo de Gerador de QR Code</title> <script src='/google_analytics_auto.js'></script></head> <style> #placeHolder { display: none; } button.center-block { margin-top: 20px; display: block; width: 60%; line-height: 2em; background: rgba(114,212,202,1); border-radius: 5px; border: 0; border-top: 1px solid #B2ECE6; box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389; color: #FFFFFF; font-size: 1.5em; text-align: center; text-shadow: 0 1px 2px #21756A; } button.center-block:hover { background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%); } button.center-block:active { box-shadow: inset 0 0 5px #000; background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); } button.center-block:focus { outline: none; border-color: green; } canvas { width:200px; } #dBtn { display: none; } h1#heading { font-family: 'Major Mono Display', monospace; } body { background-color: yellow; justify-content: center; font-family: 'VT323', monospace; font-size: 1.5rem; color: black; margin: 20px; text-align: center; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; text-align: center; } h2 { text-align: center; color: #46a294; font-size: 28px; width: 100%; margin: 10px 10; position: relative; line-height: 58px; font-weight: 400; } h2:before { content: " "; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; font-weight: bold; background-color: #2079df; margin-left: -50px; } </style> <body> <h1>Exemplo 2</h1> <h2>Gerador de QR Code</h2> <div class = "container mx-auto w-75 py-4 border my-4 bg-light"> <label for = "usr" class = "text-dark">Digite seu texto: </label> <input type = "text" class = "form-control" id = "text" name = "username" placeholder = "Informe o conte�do"> <a href = "javascript:void(0)" class = "btn btn-primary btn-lg my-4" onclick = "generate();">Gerar QR Code</a> </div> <div class = "jumbotron mx-auto w-75 border my-4 py-4 text-center" id = "dBtn"> <div id = "placeHolder"> </div> <canvas id = "myCanvas"> </canvas> <br> <a href = "#" class = "btn btn-danger btn-lg" onclick = "downloadQrCode(this);" download = "QRcode.png" >Download</a> </div> <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom p-1 "> <ul class = "navbar-nav"> <li class = "nav-item"> </li> </ul> </nav> <script> function generate(){ var typeNumber = 4; var errorCorrectionLevel = 'L'; var qr = qrcode(typeNumber, errorCorrectionLevel); var inputText = document.getElementById('text').value; qr.addData(inputText); qr.make(); document.getElementById('placeHolder').innerHTML = qr.createImgTag(); canvasScreen(); } downloadQrCode =function (el){ var canvas = document.getElementById("myCanvas"); var image = canvas.toDataURL("image/png"); el.href = image; }; function canvasScreen() { var a = document.getElementsByTagName("img")[0]; a.setAttribute("id","qrcode"); var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("qrcode"); ctx.drawImage(img,70,0,150,150); document.getElementById("dBtn").style.display = "block"; } </script> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

<< Tutorial para Criar M�scaras para N�meros de Telefone
Tutorial para Aceitar somente 10 N�meros em um Textbox >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino