Skip to content
QRCodeSDK
ALPHA

PNG-backed Image element renderer

When to use

Section titled “When to use”

Use QRCodeImageRenderer when browser code needs a CSS-customizable, accessible HTMLImageElement rather than a drawing surface.

Minimal example

Section titled “Minimal example”
import {QRCodeImageRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';


const image = qrcode('https://qrcodesdk.dev').render(
  QRCodeImageRenderer({alt: 'Scan to open qrcodesdk.dev'}),
);

Learn here more about using the Image Element in the browser.

Return value

Section titled “Return value”

The renderer synchronously returns a new HTMLImageElement. Its src is a PNG data URL generated from an intermediate Canvas element, and its width and height match that Canvas backing size. alt is always set and defaults to an empty string.

Renderer-specific options

Section titled “Renderer-specific options”

The renderer accepts the shared visual options, the same prepared image overlay and ariaLabel as the Canvas renderer, and these DOM attributes:

Option Type Default Effect
alt string '' Sets the Image element’s alt property
title string undefined Sets the Image element’s title property

Renderer-specific constraints

Section titled “Renderer-specific constraints”
  • Rendering is synchronous; center-image sources must already be loaded and have positive intrinsic dimensions.
  • The PNG is encoded into the element’s data URL. Use the Canvas renderer when the next step needs direct drawing or toBlob() rather than an Image element.
Section titled “Related guides”
Section titled “Related pages”