Error when using "mode: 'image'" to render image on qr code about kjua

[hrbonz]

If you look at the demo, the code is a bit more clear. I do it the following way:

  let imgBuffer = new Image;
  // add logo to QR code
  imgBuffer.src = 'img/my-logo.svg';

  let QR = kjua({
    image: imgBuffer,
    mSize: 20,
    mPosX: 50,
    mposY: 50,
  });

[DarthSonic]

Container element is: <div id="qrcode-wa" class="text-right p-b-xs" style="width: 100%; min-width: 96px; max-width: 96px;"></div>

[arunned]

Did you resolve this issue?

[DarthSonic]

No. Switched to a server side QrCode generator.

[qroft]

I am having the same problem. Currently trying to switch to SVG but still not success.

[benneic]

I think you might be providing the wrong object in the 'image' parameter (i.e. not a string but an element). Looking at the code, specifically the method call to ctx.drawImage this is a canvas element, so the values you can provide for image param are:

image
An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.

Source: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

[unbreakmat]

i can confirm what @hrbonz says works
this topic can be closed now