coonlink-telegramqr-lib

A lightweight, self-contained JavaScript library for generating styled QR codes optimized for Telegram. Supports canvas rendering, custom configurations, blue-themed variants, logo overlays, data URLs, and direct downloads.

Features

• Telegram-Styled QR Codes: Rounded dots and extra-rounded corners for a modern look.
• Blue Variant: One-click setup for Telegram's signature blue color scheme.
• Logo Support: Easily embed logos or images in the center.
• Flexible Output: Generate canvas elements, PNG data URLs, or download images directly.
• Customizable: Override defaults for size, colors, margins, and more.
• ES Modules & CommonJS: Works in browsers and Node.js environments.
• Self-Contained: No external dependencies - everything is bundled.

Quick Start

Basic Usage (Browser/Node.js)

import { createTelegramQR, downloadTelegramQR } from 'telegram-qr'

const qr = createTelegramQR("https://t.me/yourusername");

downloadTelegramQR("https://t.me/yourusername", "my-telegram-qr");

With Logo

import { createTelegramQRWithLogo } from 'telegram-qr'

const qr = createTelegramQRWithLogo("https://t.me/yourusername", "path/to/logo.png");

Blue Telegram Theme

import { createTelegramBlueQR } from 'telegram-qr'

const qr = createTelegramBlueQR("https://t.me/yourusername");

API Reference

createTelegramQR(data, options = {})

Creates a QR code instance with Telegram styling.

• Parameters:

  • data (string): The data to encode (e.g., Telegram login URL like https://t.me/yourusername).
  • options (object): Configuration options.
    • width (number): QR code width (default: 240).
    • height (number): QR code height (default: 240).
    • dotsOptions (object): Dot styling (e.g., { color: '#000000' }).
    • cornersSquareOptions (object): Corner square styling.
    • cornersDotOptions (object): Corner dot styling.
    • backgroundOptions (object): Background styling.
    • imageOptions (object): Image/logo options (if using image).

• Returns: QRCodeStyling instance (for further manipulation like append() to DOM).

Defaults (from TELEGRAM_QR_CONFIG):

{
  width: 240,
  height: 240,
  type: "canvas",
  qrOptions: {
    typeNumber: 0,
    mode: "Byte",
    errorCorrectionLevel: "L"
  },
  dotsOptions: {
    type: "rounded",
    color: "#000000"
  },
  cornersSquareOptions: {
    type: "extra-rounded",
    color: "#000000"
  },
  cornersDotOptions: {
    color: "#000000"
  },
  backgroundOptions: {
    color: "#ffffff"
  },
  imageOptions: {
    hideBackgroundDots: true,
    imageSize: 1.0,
    margin: 5
  }
}

createTelegramBlueQR(data, options = {})

Creates a blue-themed QR code (Telegram's brand color #0088cc).

• Parameters: Same as createTelegramQR.
• Returns: QRCodeStyling instance.

createTelegramQRWithLogo(data, logoUrl, options = {})

Creates a QR code with a centered logo/image.

• Parameters:
  • data (string): Data to encode.
  • logoUrl (string): URL or path to the logo image.
  • options (object): Same as createTelegramQR.
• Returns: QRCodeStyling instance.

getTelegramQRDataURL(data, options = {})

Generates a base64 PNG data URL for the QR code.

• Parameters: Same as createTelegramQR.
• Returns: Promise<string> (data URL).

const dataUrl = await getTelegramQRDataURL("https://t.me/yourusername");
document.getElementById('qr-container').innerHTML = `<img src="${dataUrl}" />`;

downloadTelegramQR(data, filename = 'telegram-qr', options = {})

Downloads the QR code as a PNG file.

• Parameters:
  • data (string): Data to encode.
  • filename (string): Download filename (default: 'telegram-qr').
  • options (object): Same as createTelegramQR.
• Returns: Promise<void>.

TELEGRAM_QR_CONFIG

Exported constant with default configuration (see above).

Examples

Append to DOM

import { createTelegramQR } from 'telegram-qr'

const qr = createTelegramQR("https://t.me/yourusername");
qr.append(document.getElementById("qr-container"));

Custom Styling

const qr = createTelegramQR("https://t.me/yourusername", {
  width: 300,
  dotsOptions: { color: "#ff0000" },
  backgroundOptions: { color: "#f0f0f0" }
});

Node.js Usage (Server-Side Generation)

const { getTelegramQRDataURL } = require("telegram-qr");

async function generateQR() {
  const dataUrl = await getTelegramQRDataURL("https://t.me/yourusername");
}
generateQR();

Browser Compatibility

• Modern browsers (ES modules supported).
• Device Pixel Ratio (DPR) scaling for high-DPI displays.