Plugin de jQuery para criar QR Code

Navegando e aprendendo coisas novas, enquanto estudava seletores customizáveis com jQuery encontrei posts interessantes também para a criação de QR Code com jajavasript, e a criação de um "plugin" (se assim se pode chamar, devida a simplicidade) do jQuery para criação do QR Code.

 

O que é QR Code?

Se você já sabe o que é QR Code pule essa parte, é apenas uma explicação simples para entender o conceito:

O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão.

Wikipedia pt

 

O QR Code permite que você fotografe com um celular um código e acesse automaticamente uma URL, por exemplo. O funcionamento é idêntico ao do código de barras, mas até onde sei código de barras é traduzido apenbas em números, enquanto o QR Code permite passar urls completas 😀

 

 

Como gerar QR Code com javascript?

Na verdade não vamos codificar uma URL em imagem QR Code, vamos utilizar geradores prontos e utilizar o javascript como ferramenta para solicitar a geração do QR Code e exibir essa imagem em nosso site ou aplicativo web.

 

 

$(document).ready(function(){

        // Vamos criar um plugin do jquery chamado qrcode

        (function ($) { 

          $.fn.qrcode = function(url,size) { 

                return "http://chart.apis.google.com/chart?cht=qr&chl=" + urk +"&chs=" + size +"x" + size

          }

        })(jQuery);

        $("body").append("<img src=""+$().qrcode("https://andafter.org", "100")+"">");

});

 

 

No exemplo acima utilizamos o google para criar o QR Code e é possível escolher o tamanho da imagem (variável size da função).

Mais serviços que criam QR Codes e podem ser utilizados no plugin:

http://go.bath.ac.uk/qr/download?DATA=https://andafter.org

http://qrcode.kaywa.com/img.php?s=100&d=https://andafter.org

 

 

É isso, espero ter ajudado! 🙂

 

Leia mais

 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *