Image Tool

Embed a Scannable QR Code Directly onto Any Photo

Upload an image, generate a QR code for any URL, contact, or WiFi network, drag it into place, and download the combined result in seconds.

Add QR Code

Embed a Scannable QR Code Directly onto Any Photo

Free Tool

Add QR Code to Image

Upload a background image, generate a QR code, drag it into position, and download the combined result.

QR Code

Type

Content

Style

Show frame with label

Image

Drop an image here or click to browse

JPG, PNG, WebP, GIF, BMP

A photo being uploaded as a QR code background

Upload Any Image

Try It Now

Upload Any Image

Drag and drop a JPG, PNG, WebP, or GIF file onto the upload area. The image loads instantly as a background canvas ready for your QR code.

Try It Now

QR code format selector showing URL, WiFi, and vCard options

Generate for Any Purpose

Try It Now

Generate for Any Purpose

Create QR codes that encode URLs, plain text, vCard contacts, WiFi credentials, email addresses, SMS messages, or social media profiles. Choose from multiple visual styles.

Try It Now

QR code being dragged to position on a background image

Drag, Size and Download

Download Now

Drag, Size and Download

Drag the generated QR code anywhere on the image, adjust its size with a slider, then click download. Everything is processed in the browser with no files sent to any server.

Download Now

How It Works

Add a QR code in three steps

Upload your background image

Drop any JPG, PNG, WebP, or GIF onto the upload zone or click to browse. The image is loaded locally in your browser.

Configure and generate your QR code

Choose a QR type (URL, vCard, WiFi, and more), enter the content, pick a visual style, and click Generate QR Code.

Position and download

Drag the QR code to any position on the image and adjust its size. Click Save Combined Image to download the result as a PNG.

Add QR Code

Deep Dive

How QR Overlay Works

The QR code is generated and composited entirely in your browser using the Canvas API.

QR code technology and real-world applications

QR Code Generation: qrcode Library

The QR data string is passed to the open-source qrcode library, which encodes the payload using Reed-Solomon error correction and renders the matrix to a PNG data URL. Error correction level H is used so the code remains readable even if partially obscured.

Error correctionLevel H (30% recovery capacity)

OutputPNG data URL rendered at 300 px

Canvas Compositing

When the user clicks download, a hidden HTML Canvas element is created at the full resolution of the original image. The background image is drawn first, then the QR code is drawn at the calculated pixel position and size derived from the drag-and-resize state.

ResolutionMatches the original uploaded image

Output formatPNG via canvas.toDataURL("image/png")

Optional Frame and Label

When the frame option is enabled, a rounded rectangle with a configurable background color is drawn beneath the QR code. A text label ("Scan me", "Visit our website", or a custom phrase) is rendered below the QR matrix using the Canvas 2D text API.

FrameRounded rectangle matching QR background color

Label textConfigurable from a preset list or custom input

Drag Positioning

The on-screen drag is handled with pointer event coordinates relative to the preview container. Position values are stored as percentages of the container dimensions and mapped back to absolute pixel coordinates on the full-resolution canvas at download time.

PositioningPercentage-based, resolution-independent

Size range10% to 50% of image width

All processing runs locally in the browser. Images are never uploaded to any server.

Benefits

Why Use This QR Overlay Tool

🖼️

Works with Any Image Format

JPG, PNG, WebP, GIF, BMP — any image the browser can decode works as a background.

📎

Many QR Types

URL, plain text, vCard contacts, WiFi credentials, email, SMS, social media, and more.

🎯

Drag-to-Position

Drag the QR code to any corner or spot on the image and resize it with a slider.

🖥️

Runs in the Browser

No uploads, no accounts. Images and QR data never leave your device.

Who Uses It

Who Adds QR Codes to Images

From print designers to restaurant owners, here are the most common ways people use QR image overlays.

People using QR code overlays in marketing, hospitality, and education

Marketing Designers

Add a branded QR code to a product photo, promotional banner, or social media image to link followers directly to a landing page or offer.

Restaurant and Cafe Owners

Overlay a QR code onto a food photo or interior shot to create a contactless menu image for print or display.

Event Organizers

Embed a registration or agenda link QR code directly into an event flyer or venue photo.

Teachers and Educators

Add a QR code to a worksheet illustration or diagram image to link students to supplementary videos or reading material.

Real Estate Agents

Embed a listing URL QR code onto a property photo for print brochures or physical signage.

Small Business Owners

Add a WiFi QR code or social media link QR code to a storefront or packaging photo for quick customer access.

Add QR Code Now

Related Tools

Frequently Asked Questions

What image formats can I use as a background?

Any image format the browser can decode works: JPG, PNG, WebP, GIF, and BMP are all supported. The output is always a PNG to preserve the QR code sharpness.

What types of QR codes can I generate?

You can generate QR codes for URLs, plain text, vCard contacts, WiFi credentials, email addresses, SMS messages, and social media profiles including Twitter, Instagram, YouTube, LinkedIn, Facebook, TikTok, Pinterest, and Bitcoin addresses.

Can I customize the QR code appearance?

Yes. You can choose from multiple color styles (Classic, Ocean Blue, Forest Green, Neon, and more), toggle a decorative frame, and add a call-to-action label below the QR code such as "Scan me" or a custom phrase.

How do I position the QR code on my image?

After uploading your image and generating the QR code, drag the QR code overlay to any position. Use the size slider to adjust how large the QR code appears relative to the image before downloading.

Can I add multiple QR codes to one image?

The tool currently places one QR code per image. To add a second QR code, download the combined image first, then upload it as the new background and add another QR code on top.

What is the output file format and quality?

The download is a PNG file at the full pixel resolution of your original image. QR codes are always vector-sharp because they are drawn at native resolution rather than scaled from the preview.

Is there a file size limit?

There is no strict limit enforced by the tool. Very large images (above 20 MB) may be slow to process depending on your device. For best performance, use images under 10 MB.

Get Started Free

Ready to Add a QR Code?

Upload your image, generate a QR code, and download the combined result in seconds.