When download QRcode using qr-code-styling from safari, the image was missing logo in the center

Question

I'm using qr-code-styling https://www.npmjs.com/package/qr-code-styling This's my code:

  const qrRef = React.useRef<HTMLDivElement>(null);
  const qrCodeRef = React.useRef<QRCodeStyling | null>(null);
  const downloadQRCode = (evt: React.FormEvent) => {
    qrCodeRef.current?.download({
      name: user?.username,
      extension: "png",
    });
  };

  useEffect(() => {
    if (qrRef.current) {
      const qrCode = new QRCodeStyling({
        width: 160,
        height: 160,
        type: "svg",
        data: "https://example.com/" + user?.username,
        image: "/qr_logo.png",
        dotsOptions: {
          color: "#000000",
        },
        backgroundOptions: {
          color: "#ffffff",
        },
        imageOptions: {
          crossOrigin: "anonymous",
          margin: 4,
        },
      });
      // clear the container
      qrRef.current.innerHTML = "";
      qrCode.append(qrRef.current);
      qrCodeRef.current = qrCode;
    }
  }, []);

and use it in

<div className={"w-full flex flex-col gap-[16px] items-center"}>
  // this is the qrcode image, it has logo in both google chrome and safari
  <div
    ref={qrRef}
    className={"rounded-[8px] border border-[4px] border-black p-[2px]"}
  />
  <button onClick={downloadQRCode}>
    Download as Image
  </button>
</div>

In the center of qrcode image there's a logo of the web. When I download the qrcode image from Google Chrome, it worked correctly. But when using Safari to download, the qrcode image was missing the logo in the center.

This's the image after download:

Answer 1

Try to remove type: "svg" from config. Don't know why but that worked in my case.