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({accessibility: {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 style, the same prepared centerImage and ariaLabel as the Canvas renderer, and these DOM attributes:

Option Type Default Effect
accessibility.alt string '' Sets the Image element’s alt property
accessibility.ariaLabel string undefined Sets aria-label and meaningful image semantics
accessibility.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.
  • Center images must be same-origin or CORS-enabled to encode the Canvas as a PNG data URL. Otherwise rendering throws QRCodeError with code RENDER_FAILED.
  • Options are validated and copied when QRCodeImageRenderer() is called. The prepared image source is retained by identity and checked when rendering.
  • 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”