Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

How can I eliminate the black background on a canvas using React JS?

For displaying the QR code on the screen with a white background, I'm using the qrcode.react library in React. The library works fine, and the QR code renders correctly on the screen with a white background, allowing me to scan it.

The QR code renderer code is as follows:

{qrCodeDataUrl && (
    <QRCodeCanvas
      value={qrCodeDataUrl}
      size={350}
      className="qr-code"
      imageSettings={{
        src: "/media/logos/favicon.ico",
        height: 64,
        width: 128,
        excavate: true,
      }}
      level="H"
      bgColor="#ffffff"
    />
)}
However, when downloaded, the QR code has a transparent (black) background, making it unable to be scanned. My goal is to change the background color to white.

Although I've tried to set the bgColor property on the QRCodeCanvas element to white, it doesn't work. I've also tried to style the qrcode component within the div, but it still doesn't work.

Here's the download function:

  const downloadQRCode = (url: string) => {
    const canvas = document.querySelector(".qr-code") as HTMLCanvasElement;
    const dataUrl = canvas.toDataURL("image/jpeg");
    const downloadLink = document.createElement("a");
    downloadLink.href = dataUrl;
    downloadLink.download = "qr-code.png";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  };
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems that the qrcode.react library has a bgColor property that can be used to change the background color of the QR code. However, it seems that this property is not working for you. One possible solution is to use the fill_color and back_color parameters of the make_image() method. Here is an example: 
img = qr.make_image(back_color=(255, 255, 255), fill_color=(0, 0, 0))
This should create a QR code with a white background and black foreground. You can also try using the fgcolor and bgColor properties of the component. Here is an example: 
<QRCode value="http://facebook.github.io/react/" bgColor="#FFFFFF" fgColor="#000000" />
I hope this helps! Let me know if you have any other questions.

Sources

qrcode · PyPIHow to generate QR-Code using ‘react-qr-code’ in ReactJSCreate Custom QR Code Component using QR Code Styling in React JSqrcode.react - npmqrcode - npm
avatar
Tolerim
a month ago
To make the background of the QR code white when downloaded, you need to add the backgroundColor property to the options object passed to the toDataURL method in the downloadQRCode function. Here's how you can modify the function: 
const downloadQRCode = (url: string) => {
  const canvas = document.querySelector(".qr-code") as HTMLCanvasElement;
  const dataUrl = canvas.toDataURL("image/jpeg", { backgroundColor: "#ffffff" }); // add backgroundColor option here
  const downloadLink = document.createElement("a");
  downloadLink.href = dataUrl;
  downloadLink.download = "qr-code.png";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};
By passing { backgroundColor: "#ffffff" } as the second argument to the toDataURL method, you are telling it to use white as the background color for the QR code image. Note: Make sure to use the HEX value for the color you want to set as background.
;