QR Styled Node for n8n

A powerful n8n community node package containing two useful nodes:

1. QR Styled Node - Generate highly customizable QR codes with advanced styling options,3. Important: Keep gradient stops in sequential order for proper display

PDF Image Extract Node

Basic PDF Page Extraction

1. Add the PDF Image Extract Node to your workflow
2. Configure the PDF source:
   • Data Source: Choose from File Path, URL, or Binary Data
   • File Path: Local file system path to PDF
   • URL: Web URL to PDF document
   • Binary Data: Binary data from previous nodes (specify input field name)

Page Selection Options

• Extract Mode: Choose how many pages to extract:
  • All Pages: Extract every page in the document
  • Single Page: Extract a specific page number
  • Page Range: Extract a range of pages (e.g., pages 2-5)

Output Configuration

• Output Format: PNG, JPEG, or WebP
• Quality: 1-100 for JPEG/WebP compression (higher = better quality, larger file)
• Background: Transparent, White, or Custom color
• Output Binary Field Name: Configure the binary field name (default: "data")
  • Useful when you need multiple binary outputs in the same workflow item
  • Example: Set to "pdf_page" to access as binary.pdf_page instead of binary.data

Example Workflows

Extract all pages from a local PDF:

PDF Image Extract Node (File Path: "/path/to/document.pdf", Extract: All Pages) → Process Images

Extract specific page from URL:

PDF Image Extract Node (URL: "https://example.com/doc.pdf", Extract: Single Page 3) → Save Image

Extract pages from binary data:

HTTP Request (Download PDF) → PDF Image Extract Node (Binary Data) → Multiple Processing Nodes

Working with Multiple Binary Outputs

When you need multiple binary outputs in the same workflow item, use different binary field names:

HTTP Request → PDF Image Extract (Output Field: "pdf_pages") → QR Styled Node (Output Field: "qr_codes")

This creates:

• binary.pdf_pages - The extracted PDF pages
• binary.qr_codes - The generated QR codes

Both can coexist in the same workflow item without conflicts.

QR Styled Node (continued)

Outputadients, logos, and professional designs using the popular qr-code-styling library

2. PDF Image Extract Node - Extract pages from PDF documents as high-quality images with comprehensive formatting and quality options

Features

QR Styled Node

✨ Advanced QR Code Styling

• Multiple dot styles: Square, Rounded, Dots, Classy, Extra Rounded
• Customizable corner squares and dots with different shapes
• Full gradient support with multiple color stops
• Logo/image embedding with size and positioning controls
• Transparent backgrounds and custom colors

🎨 Professional Design Options

• Linear and radial gradients for all QR elements
• Color picker UI for easy color selection
• Background transparency toggle
• Margin and spacing controls
• Multiple output formats: SVG, PNG, JPEG, WebP

🔧 Technical Controls

• Error correction levels (L, M, Q, H)
• QR code versions (auto-detection or manual)
• Encoding modes (Auto, Numeric, Alphanumeric, Byte, Kanji)
• Cross-origin settings for external images
• Custom image sizing with scanning optimization warnings

PDF Image Extract Node

📄 PDF Processing

• Extract individual pages from PDF documents as high-quality images
• Multiple data source options: File path, URL, or binary data from previous nodes
• Configurable page selection: All pages, specific page, or page range
• Support for password-protected PDFs

🖼️ Image Output Options

• Multiple formats: PNG, JPEG, WebP
• Quality settings from 1-100 for compression formats
• Configurable output binary field names for workflow flexibility
• High-resolution output with customizable pixel density

⚙️ Advanced Controls

• Canvas background color options (transparent, white, or custom)
• Error handling for corrupted or invalid PDF files
• Memory-efficient processing for large documents
• Compatible with both local files and remote URLs

Dependencies

This node package uses several powerful libraries to provide comprehensive functionality:

QR Styled Node:

• qr-code-styling - Advanced QR code generation with styling options
• sharp - Efficient image processing and format conversion
• jsdom - DOM manipulation in Node.js environment
• canvas - Required for logo/image embedding - HTML5 Canvas API for Node.js

PDF Image Extract Node:

• pdfjs-dist - Mozilla's PDF.js library for robust PDF parsing and rendering
• Native Node.js canvas support for high-quality image generation

Both nodes are built using the excellent libraries from their respective ecosystems to ensure reliable and feature-rich functionality.

Installation

Install the node directly from npm:

npm install @ydtb/n8n-nodes-qr-style

Docker Environment Setup

For Docker environments, canvas requires additional system dependencies. Create a custom Dockerfile:

Dockerfile:

# Use the official n8n image as base
FROM docker.n8n.io/n8nio/n8n:latest

# Switch to root to install system dependencies
USER root

# Install canvas system dependencies (required for node-canvas)
# These cannot be installed via npm and must be installed at the system level
RUN apk add --no-cache \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev \
    librsvg-dev \
    pixman-dev \
    pkgconfig \
    build-base

# Switch back to node user
USER node

# Install the QR style node.  
RUN mkdir -p ~/.n8n/nodes && cd ~/.n8n/nodes && npm install @ydtb/n8n-nodes-qr-style

docker-compose.yml:

services:
  n8n:
    build:
      context: .
    # ... rest of your n8n configuration

Then build and run:

docker compose down
docker compose build --no-cache
docker compose up -d

Usage

QR Styled Node

Basic QR Code Generation

1. Add the QR Styled Node to your workflow
2. Enter the data you want to encode in the Data field
3. Configure basic options:
   • QR Code Size: Width and height in pixels (default: 600)
   • Shape: Square or Circle
   • Output Format: SVG, PNG, JPEG, or WebP

Advanced Styling

Dots Styling

• Dots Type: Choose from Square, Rounded, Dots, Classy, etc.
• Advanced Dots Options: Access gradient colors, rotation, and size controls

Corner Customization

• Corner Square Type: Style the detection pattern squares
• Corner Dot Type: Style the dots inside detection patterns
• Advanced Corner Options: Apply gradients and custom colors

Background Options

• Transparent Background: Toggle for transparent backgrounds
• Background Color: Solid color picker
• Gradient Options: Linear/radial gradients with multiple color stops

Logo Integration

• Logo Image Source: Choose from three options:
  • None: No logo image
  • URL: Embed images from URLs
  • Binary Data: Use binary image data from previous nodes
• Binary Input: When using binary data, specify the binary property name (defaults to 'data')
• Advanced Image Options: Control size, margin, and dot hiding
• Size Warning: Automatic guidance for optimal scanning

Using Binary Logo Images

To use binary image data as the logo:

1. Set Logo Image Source to "Binary Data"
2. Specify the Input Binary Field name containing your image data (usually 'data')
3. Connect a node that provides binary image data (HTTP Request, File System, etc.)
4. Configure Advanced Image Options as needed

Example workflow:

HTTP Request Node (download image) → QR Styled Node (with binary logo) → Output

Gradient Configuration

The node supports sophisticated gradient configurations:

1. Add Gradient Stops: Use the "Add Gradient Stop" button
2. Position Values: Set from 0.0 to 1.0 in sequential order
3. Color Selection: Use the color picker for each stop
4. Important: Keep gradient stops in sequential order for proper display

Output

The node provides both JSON data and binary image output:

JSON Output:

• data: Original input data that was encoded
• qrCodeBase64: Base64 encoded image with data URI format (data:image/svg+xml;base64,... or similar)
• qrCodeSize: Image dimensions in pixels
• outputFormat: Actual format used (svg, png, jpeg, or webp)
• requestedFormat: Format that was originally requested
• generatedAt: ISO timestamp of when the QR code was generated

Output Format Options:

• SVG: Scalable vector format, perfect for web use and infinite scaling (supports transparency)
• PNG: Raster format with transparency support, ideal for print and graphics (supports transparency)
• JPEG: Compressed raster format, best for photos and smaller file sizes (no transparency support)
• WebP: Modern format with excellent compression and quality balance (supports transparency)
• filename: Auto-generated filename with timestamp

Transparency Support:

• Supported formats: SVG, PNG, WebP
• JPEG handling: When transparency is requested with JPEG, a white background is used instead (with warning message)
• The transparency option is available for all formats but behaves differently based on format capabilities

Binary Output:

• qrCode: Binary image data ready for download, saving to file, or further processing
  • fileName: Generated filename (e.g., qr-code-2025-06-27T10-30-45-123Z.png)
  • mimeType: Image MIME type (image/svg+xml, image/png, image/jpeg, or image/webp)
  • fileExtension: File extension (svg, png, jpeg, or webp)

Development

To set up the development environment:

# Clone the repository
git clone https://github.com/yourdigitaltoolbox/qr-style-node.git
cd qr-style-node

# Install dependencies
npm install

# Build the node
npm run build

# Run linting
npm run lint

# Test locally with n8n
npm link

npm link @ydtb/n8n-nodes-qr-style

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Credits

This node is built using the amazing qr-code-styling library by Denys Kozak. All QR code generation and styling functionality is powered by this excellent library.

License

MIT

Support

If you encounter any issues or have questions:

1. Check the Issues section
2. Create a new issue with detailed description
3. Join the n8n community for general n8n questions

Made with ❤️ for the n8n community