JavaScript trik — Generisanje QR kodova u PNG i EPS formatima umesto u SVG

Ovaj trik pokazuje kako generisati QR kodove u PNG ili EPS formatima, što može biti korisno za situacije koje zahtevaju određeni format slike, poput štampanja ili uklapanja u različite tipove dokumenata i aplikacija.

Grupa: Rad sa Web API-ima

U čemu je trik? Trik leži u korišćenju JavaScript biblioteka ili web servisa koji podržavaju generisanje QR kodova u više formata, omogućavajući vam da odaberete format koji najbolje odgovara vašim potrebama.

Osnovni nivo: Korišćenje JavaScript biblioteke za generisanje QR kodova

Možete koristiti biblioteke poput qrcode ili qr-image koje podržavaju generisanje QR kodova u različitim formatima, uključujući PNG.

Za qr-image:

const qr = require('qr-image');
const fs = require('fs');

let qrSVG = qr.image('https://example.com', { type: 'png' });
qrSVG.pipe(fs.createWriteStream('QRCode.png'));

Ovaj kod generiše QR kod za URL ‘https://example.com' i snima ga u PNG formatu.

Srednji nivo: Web servisi za generisanje QR kodova

Ako ne želite da koristite biblioteke na klijentskoj strani ili na serveru, možete koristiti web servise koji omogućavaju generisanje QR kodova preko URL-a. Neki servisi dozvoljavaju specificiranje formata slike direktno u URL-u zahteva.

<img src="https://neki-web-servis.com/generate?data=https://example.com&format=png" alt="QR kod">

U ovom primeru, QR kod se generiše pozivom web servisa i prikazuje kao PNG slika unutar <img> taga.

Napredni nivo: Dinamičko generisanje i preuzimanje QR kodova

Za složenije potrebe, kao što je dinamičko generisanje QR kodova sa prilagođenim podacima i omogućavanje korisnicima da ih preuzmu, možete kombinovati JavaScript na klijentskoj strani sa server-side logikom ili web servisom.

function generisiIpreuzmiQRKod(data, format = 'png') {
  let url = `https://neki-web-servis.com/generate?data=${encodeURIComponent(data)}&format=${format}`;

  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      let tempLink = document.createElement('a');
      tempLink.href = window.URL.createObjectURL(blob);
      tempLink.setAttribute('download', `QRCode.${format}`);
      tempLink.click();
    });
}

Ovaj kod generiše QR kod na osnovu prosleđenih podataka, koristeći web servis, i zatim dinamički kreira link za preuzimanje generisanog QR koda u željenom formatu.

Implementacijom ovih tehnika, možete generisati i koristiti QR kodove u različitim formatima, što vam pruža fleksibilnost za različite primene, od digitalnih do štampanih medija.

Imamo knjigu za vas: JavaScript od početnika do profesionalca