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

```bash
npm install
```

## Usage

### With React

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

```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:

```javascript
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<string> - 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<string> - 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<string> - 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<string> - 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<string> - 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<Element> - 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<string> - 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

```javascript
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

```javascript
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

```javascript
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

```bash
npm run dev
```

### Building for Production

```bash
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