QRCode.Fun QRCode.Fun
Começar
Biblioteca de Códigos QR em JavaScript

Gere Códigos QR com JavaScript

JavaScript é a linguagem mais popular para desenvolvimento web. Use bibliotecas como qrcode.js ou qr-code-styling para gerar códigos QR no navegador ou Node.js, ou chame a API do QRCode.fun para estilos avançados.

Experimentar Gerador QRVer Documentação da API

Instalação

Instale as bibliotecas populares de códigos QR JavaScript usando o seu gestor de pacotes preferido.

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm install qr-code-styling

Gerar Códigos QR com Bibliotecas JavaScript

Aqui estão exemplos de código usando bibliotecas populares de códigos QR JavaScript para gerar códigos QR nos seus projetos.

Basic QR Code (Node.js)
const QRCode = require('qrcode')

// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)

// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
  width: 300,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Browser Canvas Rendering
import QRCode from 'qrcode'

const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
  width: 256,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'

const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://qrcode.fun',
  image: '/logo.png',
  dotsOptions: {
    color: '#1A2B3C',
    type: 'rounded'
  },
  cornersSquareOptions: {
    color: '#8564C3',
    type: 'extra-rounded'
  },
  backgroundOptions: {
    color: '#FFFFFF'
  }
})

qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })
QRCode.fun API

Gerar Códigos QR via API em JavaScript

Use a API do QRCode.fun para gerar códigos QR estilizados com cores, formas e logotipos personalizados a partir da sua aplicação JavaScript.

Integração de API JavaScript
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: 'https://qrcode.fun',
    width: 300,
    height: 300,
    type: 'png',
    margin: 10,
    dotsOptions: {
      color: '#1A2B3C',
      type: 'rounded'
    },
    cornersSquareOptions: {
      color: '#8564C3',
      type: 'extra-rounded'
    },
    backgroundOptions: {
      color: '#FFFFFF'
    }
  })
})

const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)

Pré-visualização de Código QR ao Vivo

Experimente gerar um código QR com JavaScript agora mesmo.

Pré-visualização QR

Biblioteca Nativa vs API

Compare o uso direto de uma biblioteca de códigos QR JavaScript com a API do QRCode.fun.

FuncionalidadeBiblioteca NativaQRCode.fun API
Complexidade de configuraçãoInstalar pacote, configurar bundlerUma única requisição HTTP
PersonalizaçãoVaria conforme a bibliotecaEstilização completa: cores, formas, logotipos
Suporte offlineSimRequer internet
ManutençãoAtualizar dependências manualmenteSempre atualizado
Formatos de saídaPNG, SVG (depende da biblioteca)PNG, SVG

Casos de Uso de Códigos QR em JavaScript

Cenários comuns onde desenvolvedores JavaScript geram códigos QR.

Aplicações Web

Gere códigos QR dinamicamente em aplicações web React, Vue, Angular ou JavaScript puro para partilhar links, pagamentos ou autenticação.

Backend Node.js

Crie códigos QR do lado do servidor para faturas, bilhetes, etiquetas de envio e anexos de e-mail automatizados.

Aplicações Web Progressivas

Adicione geração de códigos QR a PWAs para experiências móveis com capacidade offline e códigos escaneáveis.

Extensões de Navegador

Construa extensões Chrome ou Firefox que geram códigos QR para o URL da página atual ou texto selecionado.

Perguntas Frequentes

Perguntas comuns sobre a geração de códigos QR com JavaScript.

As duas opções mais populares são qrcode (leve, ideal para códigos QR simples) e qr-code-styling (personalização avançada com cores, formas e logotipos). Escolha qrcode para simplicidade ou qr-code-styling para flexibilidade de design.

Comece a gerar códigos QR com JavaScript

Use o nosso gerador online gratuito para códigos QR rápidos, ou integre a API no seu projeto JavaScript para geração automatizada.

Abrir Gerador QRExplorar Documentação da API