JavaScript ile QR Kod Oluşturun
JavaScript, web geliştirme için en popüler dildir. Tarayıcıda veya Node.js'de QR kod oluşturmak için qrcode.js veya qr-code-styling gibi kütüphaneleri kullanın ya da gelişmiş stil için QRCode.fun API'sini çağırın.
Kurulum
Tercih ettiğiniz paket yöneticisini kullanarak popüler JavaScript QR kod kütüphanelerini kurun.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingJavaScript Kütüphaneleri ile QR Kod Oluşturun
Projelerinizde QR kod oluşturmak için popüler JavaScript QR kod kütüphanelerini kullanan kod örnekleri.
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'
}
})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'
}
})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' })JavaScript'te API ile QR Kod Oluşturun
JavaScript uygulamanızdan özel renkler, şekiller ve logolarla stilize QR kodlar oluşturmak için QRCode.fun API'sini kullanın.
// 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)Canlı QR Kod Önizleme
Şimdi JavaScript ile bir QR kod oluşturmayı deneyin.
Yerel Kütüphane vs API
JavaScript QR kod kütüphanesini doğrudan kullanma ile QRCode.fun API karşılaştırması.
| Özellik | Yerel Kütüphane | QRCode.fun API |
|---|---|---|
| Kurulum karmaşıklığı | Paket kurulumu, bundler yapılandırması | Tek HTTP isteği |
| Özelleştirme | Kütüphaneye göre değişir | Tam stil: renkler, şekiller, logolar |
| Çevrimdışı destek | Evet | İnternet gerekli |
| Bakım | Bağımlılıkları manuel güncelleme | Her zaman güncel |
| Çıktı formatları | PNG, SVG (kütüphaneye bağlı) | PNG, SVG |
JavaScript QR Kod Kullanım Alanları
JavaScript geliştiricilerinin QR kod oluşturduğu yaygın senaryolar.
Web Uygulamaları
Bağlantı paylaşımı, ödeme veya kimlik doğrulama için React, Vue, Angular veya vanilla JS web uygulamalarında dinamik olarak QR kod oluşturun.
Node.js Backend
Faturalar, biletler, kargo etiketleri ve otomatik e-posta ekleri için sunucu tarafında QR kod oluşturun.
Progresif Web Uygulamaları
Taranabilir kodlarla çevrimdışı çalışabilen mobil deneyimler için PWA'lara QR kod oluşturma ekleyin.
Tarayıcı Eklentileri
Geçerli sayfa URL'si veya seçili metin için QR kod oluşturan Chrome veya Firefox eklentileri geliştirin.
Sıkça Sorulan Sorular
JavaScript ile QR kod oluşturma hakkında yaygın sorular.
JavaScript ile QR kod oluşturmaya başlayın
Hızlı QR kodlar için ücretsiz çevrimiçi oluşturucumuzu kullanın veya otomatik oluşturma için API'yi JavaScript projenize entegre edin.