qr-pure - v2.1.0
    Preparing search index...

    Class CanvasRenderer

    Renderizador de códigos QR para elementos Canvas.

    Convierte una matriz QR en una imagen renderizada en un elemento HTML Canvas. Soporta personalización de colores, escala y margen.

    const qr = new QRCode('Hello');
    const result = qr.generate();

    const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
    CanvasRenderer.render(canvas, result.matrix, {
      scale: 10,
      darkColor: '#000080'
    });
    Index

    Constructors

    constructor

    Methods

    calculateSize createCanvas render renderRounded toBlob toDataURL

    Constructors

    Methods

    • Calcula el tamaño final del canvas.

      Parameters

      • matrixSize: number

        Tamaño de la matriz QR

      • options: RenderOptions = {}

        Opciones de renderizado

      Returns number

      Tamaño en píxeles

      const size = CanvasRenderer.calculateSize(21, { scale: 10 });
      // 290 (21 + 4*2 margin) * 10

    • Crea un canvas nuevo y renderiza el QR.

      Parameters

      Returns HTMLCanvasElement

      Elemento canvas con el QR renderizado

      const canvas = CanvasRenderer.createCanvas(matrix);
      document.body.appendChild(canvas);

    • Renderiza una matriz QR en un canvas.

      Parameters

      • canvas: HTMLCanvasElement

        Elemento canvas donde renderizar

      • matrix: QRMatrix

        Matriz del código QR

      • options: RenderOptions = {}

        Opciones de renderizado

      Returns void

      CanvasRenderer.render(canvas, matrix, { scale: 5 });

    • Renderiza con módulos redondeados (estilo moderno).

      Parameters

      • canvas: HTMLCanvasElement

        Elemento canvas donde renderizar

      • matrix: QRMatrix

        Matriz del código QR

      • options: RenderOptions = {}

        Opciones de renderizado

      • cornerRadius: number = 0.4

        Radio de las esquinas (0-0.5)

      Returns void

      CanvasRenderer.renderRounded(canvas, matrix, { scale: 10 }, 0.3);

    • Obtiene el código QR como Blob.

      Parameters

      Returns Promise<Blob>

      Promise que resuelve con el Blob PNG

      Genera un Blob PNG que puede usarse para descargas o subir a un servidor.

      const blob = await CanvasRenderer.toBlob(matrix);
      const url = URL.createObjectURL(blob);

    • Obtiene el código QR como Data URL.

      Parameters

      Returns string

      Data URL en formato PNG

      Genera una URL de datos en formato PNG que puede usarse como src de una imagen o para descarga.

      const dataUrl = CanvasRenderer.toDataURL(matrix);
      const img = document.createElement('img');
      img.src = dataUrl;

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods