JyKsports_FrontEnd

Jyk Sports is a store where people can find and buy shoes for the family . Nowadays, they need help to coordinate all of the information about brands, size colors, or references that arrive at the stores from China. This is a web application made it in React js, Redux Toolkit and some libraries to generate a QR code because the idea in the future is to have the ability to read the QR code and show to the user the information that it is looking for .

Oficial web site :

https://jy-ksports-front-end.vercel.app/

Interface

This is the principal page of the web app where the user should be register with all the requires in order to log in before

Code

The library used to generate the QR code was " react-qr-code" and you can find it in the following link :

• QR code.

You can find an example of how to use this library here :

• QR code example.

Download QR code as an image

To download a svg as an image it is necessary to convert the file as image and then use the method toDataURL to select the format. You can find the code here ans small explanation about why it is a must to do in order to use the method metion before.

The toDataURL method is not supported by all types of elements, including SVGs. If you're trying to download an SVG-based QR code generated by the react-qr-code library, you might have to convert the SVG to a different format, such as PNG, before downloading. The SVG-based QR code is first converted to an image, and then drawn on a canvas. The canvas is then converted to a PNG data URL using the toDataURL method

    const svg = qrCodeRef.current.childNodes[0];
    const xml = new XMLSerializer().serializeToString(svg);

    const imag = new Image();
    imag.src = `data:image/svg+xml;base64,${btoa(xml)}`;

    const canvas = document.createElement('canvas');
    canvas.width = svg.getAttribute('width');
    canvas.height = svg.getAttribute('height');

    const context = canvas.getContext('2d');
    await new Promise((resolve) => {
      imag.onload = () => {
        context.drawImage(imag, 0, 0);
        resolve();
      };