QR Codes Resolution

**My non tracking QR Code Maker runs well! However, the PNG images download at 96 DPI. How can they download at 300 DPI? Below is some JS.


const qrDataInput = document.getElementById('qrData');
    const foregroundColorInput = document.getElementById('foregroundColor');
    const backgroundColorInput = document.getElementById('backgroundColor');
    const CoverInputImage = document.getElementById('CoverInputImage');
    const CoverPreview = document.getElementById('CoverPreview');
    const generateBtn = document.getElementById('generateBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const qrCanvas = document.getElementById('qrCanvas');

    let CoverImage = null;

    // Live Preview of Cover Image
    CoverInputImage.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          logoImage = new Image();
          logoImage.src = reader.result;
          CoverPreview.src = reader.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // Generate QR Code with Live Color Preview
    const generateQRCode = () => {
      const qrData = qrDataInput.value || 'Sample QR Code.  Please Type https://YourSite.com, Or Whatever.';
      const foregroundColor = foregroundColorInput.value;
      const backgroundColor = backgroundColorInput.value;

      QRCode.toCanvas(qrCanvas, qrData, {
        width: 250,
        margin: 1,
        color: {
          dark: foregroundColor, // Foreground Color
          light: backgroundColor, // Background Color
        },
        errorCorrectionLevel: 'H',
      }, (error) => {
        if (error) {
          console.error('ERROR Generating QR Code:', error);
        } else {
          // Add Cover Image / Logo - logoImage Is The SAME As CoverImage.
          if (logoImage) {
            const ctx = qrCanvas.getContext('2d');
            // 0.333
            const logoSize = qrCanvas.width * 0.350; /* Logo Size Is 0.350 (35%) of QR Code Size (250px By 250px).
            100px By 100px Is Close To The Size To Use For The Cover Images. */
            const x = (qrCanvas.width - logoSize) / 2;
            const y = (qrCanvas.height - logoSize) / 2;

            logoImage.onload = () => {
              ctx.drawImage(logoImage, x, y, logoSize, logoSize);
            };

            if (logoImage.complete) {
              ctx.drawImage(logoImage, x, y, logoSize, logoSize);
            }
          }

          downloadBtn.style.display = 'block';
        }
      });
    };

    // Update QR Code on Color Change
    foregroundColorInput.addEventListener('input', generateQRCode);
    backgroundColorInput.addEventListener('input', generateQRCode);

    // Generate QR Code Button
    generateBtn.addEventListener('click', generateQRCode);

    // Download QR Code
    downloadBtn.addEventListener('click', () => {
      const link = document.createElement('a');
      link.download = 'ROYAL-QR-Code-Maker.png';
      link.href = qrCanvas.toDataURL('image/png');
      link.click();
});`**

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You can change the DPI at the time of printing depending on how large you want to print them.

The QR Codes download at 250 by 250 and I have 2 high rez cover images that can be added. I prefer having high rez by default to make this as user friendly as possible, and the Best Quality. :smiling_face_with_sunglasses:

What have you tried so far to increase the resolution?

I searched 2 JS files for anything about size / resolution. The one that I added on here, and one that goes with that. None of what I found appears to be connected to the QR Code resolution. :smiling_face_with_sunglasses:

so this is not code you wrote yourself?

There’s many lines related to size in there. You didn’t find anything at all you think could be related? It’s not a lot of code to look through.

Why didn’t you provide all of the code here?

What does “some JS” mean? :smiling_face_with_sunglasses:

I tested 2000px by 2000px, and Higher. Higher appears to cause the QR Code maker to Not run properly. And 2000 by 2000 still downloads as 96 DPI. :smiling_face_with_sunglasses:

Below is the other JS File.

The other JS file is too long. I need to step away possibly until tomorrow.

What do you mean? What did you do?

How are you checking the DPI? Are you going to print these out? Just print them at whatever size you want.

I’m briefly back on here. When I upload the QR Codes via the Paint.net app, that shows 96 DPI. The 2 cover images start out at 300px by 300px, and Paint.net shows those as 299.97 High Rez. :smiling_face_with_sunglasses:

Below is a link to the other JS file.

https://SiteEditing.cc/000-QR-Code-Editing/qr-code.min.js

DPI only applies to print.

If you print a 300px image at 96 DPI it will be 300 / 96 = 3.125 inches large.

If you print a 300px image at 300 DPI it will be 300 / 300 = 1 inch large.

If you aren’t printing them, then the DPI has no effect, you still have a 300px image onscreen.

If you want a bigger image on screen, you want a higher resolution. Bigger than 300px I guess.

I put QR Codes on vinyl stickers / labels, signs etc. I’m Not sure what the use is for anybody else that might use my QR Code Maker. When I order stickers, I’ve been told at times that the file Isn’t High Rez enough for great printing results. :smiling_face_with_sunglasses: