Add QR Code to Image

Why use this tool?

• 100% private

  Your image and the QR code are composited using the HTML Canvas API, entirely in your browser. No data ever leaves your device.

• Live preview

  Every change — position, size, colour, opacity — updates the preview instantly so you can iterate without re-uploading.

• Full control

  Five positions, four sizes, custom fg/bg colours, opacity slider, edge padding, and error correction level.

• Any image format

  Works with any image your browser can decode — JPG, PNG, WebP, GIF, BMP, and more.

• Five content types

  URL, plain text, email with subject, phone number, and WiFi credentials — with a form designed for each.

• PNG and JPEG output

  Download as lossless PNG (best for graphics and transparency) or JPEG (smaller file size for photos).

When would you add a QR code to an image?

From product labels to event posters, here are the most common reasons to embed a QR code directly in an image.

How the compositing works under the hood

No servers, no uploads — here is exactly what the browser does when you place a QR code on your image.

1. 01

   The image is read from disk

   When you upload a file, the browser reads it locally using a FileReader and converts it to a data URL. The image bytes never leave your device.

2. 02

   The QR code is generated as a PNG

   The qrcode library renders your content into a PNG data URL in memory. The QR size in pixels is calculated as a fraction of your image width, so it scales appropriately regardless of resolution.

3. 03

   Both images are drawn onto a canvas

   An HTML Canvas element is sized to match your original image exactly. The original is drawn first at full resolution, then the QR code is drawn on top at the calculated (x, y) offset using ctx.drawImage().

4. 04

   Opacity is applied via globalAlpha

   Before drawing the QR code, the canvas context's globalAlpha is set to your chosen opacity value. This blends the QR code transparently with the pixels beneath without affecting the background image.

5. 05

   The result is exported as PNG or JPEG

   canvas.toDataURL() serialises the composited image in your chosen format. A temporary anchor element triggers a standard file-save dialogue — no server roundtrip at any point.

Tips for a scannable result

Placing a QR code on an image introduces risks that a plain white background does not — follow these tips to keep it reliably scannable.

1. 01

   Use a white QR background over busy image areas

   If the area of the image behind the QR code is colourful or detailed, keep the QR background colour white. A white background creates a guaranteed contrast zone regardless of what is underneath.

2. 02

   Keep opacity at 100% for reliable scanning

   Semi-transparent QR codes look elegant but are harder to scan, especially in poor lighting. Reserve low opacity for decorative uses. For any QR code that must be functional, use 100% opacity.

3. 03

   Choose a corner with a plain background

   Scan failure rates rise sharply when the QR code overlaps high-contrast edges, text, or faces in the background image. Position the QR over the sky, a plain wall, or a uniformly coloured area.

4. 04

   Use error correction level H for image overlays

   Level H adds 30% redundancy, meaning up to 30% of the QR code can be damaged or obscured and it will still scan. This is the right choice when the image background is unpredictable.

5. 05

   Test on multiple devices before publishing

   Scan the downloaded image using at least two different phones and apps. Check on screen and, if printing, on a physical printout. What works on a monitor may fail when printed on a textured or glossy surface.

Related tools