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