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

[DarthSonic]

My call is:

$("#qrcode-wa").kjua({ size: 96, text: "https://wa.me/4915735999584?text=%2FStart+21325219541", mode: "image", mSize: 25, image: "/Images/brands/32/whatsapp.png" });

JavaScript exception is:

qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)' at t.exports (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at a (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at t.exports (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at n (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at HTMLDivElement.<anonymous> (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at Function.each (jquery?v=T7NDPMnXDfT0hkqsk0e5hvq_cKBxOBwH_b2vkodW8AQ1:4) at i.fn.init.each (jquery?v=T7NDPMnXDfT0hkqsk0e5hvq_cKBxOBwH_b2vkodW8AQ1:4) at i.fn.init.jQuery.fn.kjua (qrcode?v=bu7FvF0yb5E_3UPC6WBu_2Yg5TTFPZ_yLqhyE_ba1wU1:5) at HTMLDocument.<anonymous> ((Index):750) at c (jquery?v=T7NDPMnXDfT0hkqsk0e5hvq_cKBxOBwH_b2vkodW8AQ1:4)

[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

[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,
  });

[unbreakmat]

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