qrcodedemo/README.md

QR Code Generator

A powerful QR code generator with support for custom images, color customization, and SVG export. Built with React and vanilla JavaScript utilities.

Features

• ✅ QR Code Generation: Generate QR codes from any text
• ✅ Custom Images: Embed logos or images in the center of QR codes
• ✅ Color Customization: Customize foreground and background colors
• ✅ SVG Export: Export QR codes as scalable vector graphics
• ✅ Bitmap Vectorization: Convert bitmap images to vector paths in SVG
• ✅ Multiple Formats: Support for PNG, JPEG, GIF, WebP, and SVG images
• ✅ Precise Positioning: Perfect centering with decimal coordinates
• ✅ Framework Agnostic: Use with React or vanilla JavaScript

Installation

npm install

Usage

With React

The main React component is located at src/components/TextAreaComponent.jsx:

import TextAreaComponent from './components/TextAreaComponent';

function App() {
  return (
    <div className="App">
      <h1>QR Code Generator</h1>
      <TextAreaComponent />
    </div>
  );
}

With Vanilla JavaScript

Use the utility functions directly in any JavaScript project:

import {
  generateQRCode,
  generateCompleteSVGQRCode,
  downloadSVG,
  fileToDataURL,
  validateImageFile
} from './src/utils/qrCodeUtils.js';

// Generate a basic QR code
const qrCodeUrl = await generateQRCode('Hello World', '#000000', '#FFFFFF');

// Generate QR code with custom image
const svgContent = await generateCompleteSVGQRCode(
  'Hello World',
  'data:image/png;base64,...', // Custom image data URL
  20, // Image size percentage
  '#000000', // Foreground color
  '#FFFFFF'  // Background color
);

// Download as SVG
downloadSVG(svgContent, 'qrcode.svg');

API Reference

Core Functions

generateQRCode(text, foregroundColor, backgroundColor)

Generates a QR code as a data URL (PNG format).

• Parameters:
  • text (string): Text to encode in the QR code
  • foregroundColor (string): QR code color (default: '#000000')
  • backgroundColor (string): Background color (default: '#FFFFFF')
• Returns: Promise - Data URL of the generated QR code

generateSVGQRCode(text, foregroundColor, backgroundColor)

Generates a QR code as an SVG string.

• Parameters:
  • text (string): Text to encode in the QR code
  • foregroundColor (string): QR code color (default: '#000000')
  • backgroundColor (string): Background color (default: '#FFFFFF')
• Returns: Promise - SVG string of the generated QR code

generateCompleteSVGQRCode(text, imageUrl, imageSize, foregroundColor, backgroundColor)

Generates a complete SVG QR code with embedded image.

• Parameters:
  • text (string): Text to encode in the QR code
  • imageUrl (string, optional): Custom image data URL
  • imageSize (number): Image size as percentage (0-100, default: 20)
  • foregroundColor (string): QR code color (default: '#000000')
  • backgroundColor (string): Background color (default: '#FFFFFF')
• Returns: Promise - Complete SVG string with embedded image

Image Processing Functions

addImageToQRCode(qrCodeUrl, imageUrl, imageSize)

Adds a custom image to a QR code data URL.

• Parameters:
  • qrCodeUrl (string): The QR code data URL
  • imageUrl (string): The custom image data URL
  • imageSize (number): Image size as percentage (0-100)
• Returns: Promise - Data URL of QR code with embedded image

addImageToSVG(svgString, imageUrl, imageSize)

Adds a custom image to an SVG QR code.

• Parameters:
  • svgString (string): The SVG QR code string
  • imageUrl (string): The custom image data URL
  • imageSize (number): Image size as percentage (0-100)
• Returns: Promise - SVG string with embedded image

vectorizeBitmap(img, targetSize, x, y, svgDoc)

Converts a bitmap image to SVG vector elements.

• Parameters:
  • img (HTMLImageElement): The image element to vectorize
  • targetSize (number): Target size in QR coordinate system
  • x (number): X position in QR coordinate system
  • y (number): Y position in QR coordinate system
  • svgDoc (Document): The SVG document to add elements to
• Returns: Promise - SVG group element containing vectorized image

Utility Functions

downloadSVG(svgContent, filename)

Downloads an SVG string as a file.

• Parameters:
  • svgContent (string): The SVG content to download
  • filename (string): The filename for the download (default: 'qrcode.svg')

fileToDataURL(file)

Converts a file to data URL.

• Parameters:
  • file (File): The file to convert
• Returns: Promise - Data URL of the file

validateImageFile(file, maxSize)

Validates an image file.

• Parameters:
  • file (File): The file to validate
  • maxSize (number): Maximum file size in bytes (default: 2MB)
• Returns: Object - Validation result with success boolean and error message

Examples

Basic QR Code Generation

import { generateQRCode } from './src/utils/qrCodeUtils.js';

const qrCode = await generateQRCode('https://example.com');
console.log(qrCode); // data:image/png;base64,...

QR Code with Custom Image

import { generateCompleteSVGQRCode, downloadSVG } from './src/utils/qrCodeUtils.js';

const svgContent = await generateCompleteSVGQRCode(
  'https://example.com',
  'data:image/svg+xml;base64,...', // Your logo
  25, // 25% of QR code size
  '#1a1a1a', // Dark gray
  '#ffffff'  // White
);

downloadSVG(svgContent, 'company-qrcode.svg');

File Upload and Validation

import { fileToDataURL, validateImageFile } from './src/utils/qrCodeUtils.js';

const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

const validation = validateImageFile(file);
if (validation.success) {
  const dataUrl = await fileToDataURL(file);
  // Use dataUrl for QR code generation
} else {
  alert(validation.error);
}

Vanilla JavaScript Example

See examples/vanilla-js-example.html for a complete vanilla JavaScript implementation.

Development

Running the Development Server

npm run dev

Building for Production

npm run build

Project Structure

src/
├── components/
│   └── TextAreaComponent.jsx    # Main React component
├── utils/
│   └── qrCodeUtils.js          # Pure JavaScript utility functions
├── App.jsx                     # React app entry point
├── main.jsx                    # React app initialization
└── style.css                   # Global styles

examples/
└── vanilla-js-example.html     # Vanilla JavaScript example

dist/                           # Production build output

Dependencies

• React: UI framework
• Vite: Build tool and development server
• qrcode: QR code generation library
• imagetracer: Bitmap to vector conversion (optional)

Browser Support

• Modern browsers with ES6 module support
• Canvas API support for image processing
• File API support for file uploads

License

MIT License - feel free to use this project for any purpose.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Changelog

v1.0.0

• Initial release
• QR code generation with custom images
• SVG export with vectorization
• React and vanilla JavaScript support
• Color customization
• Precise coordinate positioning