Get the QR code canvas image with a customized background by downloading it

Question

Get the QR code canvas image with a customized background by downloading it

I am having trouble with downloading a QR code canvas image with a background. The download works fine, but my device is unable to scan the code properly due to an incomplete border. I need to add a white background behind it to make it larger.

Current image: https://i.sstatic.net/DYJTx.png

Expected image: https://i.sstatic.net/gMgzI.png

This is my current code:

<a id="download-qr">
<div id="qrCode"></div>

  $('#qrCode').qrcode({
     render: "canvas",
     minVersion: 8,
     maxVersion: 8,
     ecLevel: 'M',
     size: 200,
     mode: 0,
     text: code,
  });

  var canvas = $("#qrCode").children(":first")[0];
  var ctx = canvas.getContext("2d");
  ctx.globalCompositeOperation = 'destination-over';
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var img = canvas.toDataURL("image/jpeg");
  var dl = document.getElementById('download-qr');
  dl.setAttribute('href', img);
  dl.setAttribute('download', 'test.jpg');

Your assistance would be greatly appreciated. Thank you very much.

javascript html css canvas

Answer 1

Answer №1

To enhance your ctx object, consider incorporating a white border.

ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();

Answer 2

To enhance your ctx object, consider incorporating a white border.

ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();

Answer 3

Answer №2

Are you looking for a way to generate QR codes in your project? If not, consider using Qurious. It offers its own padding option and can generate QR codes directly on a canvas element.

To implement Qurious, add the following script to the head section of your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

Next, include the following HTML code to create the canvas where the QR code will be displayed:

<canvas id="qrCode"></canvas>

Then, insert the provided JavaScript code to generate and download the QR code based on a specific value:

const makeQR = (your_value) => {
      let qrcodeContainer = document.getElementById("qrCode");
        qrcodeContainer.innerHTML = "";
        new QRious({
          element: qrcodeContainer,
          value: your_value,
          size: 600,
          padding:50,
        }); // generate QR code
        
        var link = document.createElement('a');
        link.download = 'your_file.png';
        link.href = document.getElementById('qrCode').toDataURL()
        link.click(); // download it
        
    }

makeQR("your value")

Answer 4

Are you looking for a way to generate QR codes in your project? If not, consider using Qurious. It offers its own padding option and can generate QR codes directly on a canvas element.

To implement Qurious, add the following script to the head section of your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

Next, include the following HTML code to create the canvas where the QR code will be displayed:

<canvas id="qrCode"></canvas>

Then, insert the provided JavaScript code to generate and download the QR code based on a specific value:

const makeQR = (your_value) => {
      let qrcodeContainer = document.getElementById("qrCode");
        qrcodeContainer.innerHTML = "";
        new QRious({
          element: qrcodeContainer,
          value: your_value,
          size: 600,
          padding:50,
        }); // generate QR code
        
        var link = document.createElement('a');
        link.download = 'your_file.png';
        link.href = document.getElementById('qrCode').toDataURL()
        link.click(); // download it
        
    }

makeQR("your value")

Get the QR code canvas image with a customized background by downloading it

Answer №1

Answer №2

Similar questions

Revamping the Bootstrap framework in a major project

The images are not clickable when trying to hyperlink them

Guide to modifying the background image color using CSS

Tips for centering a background image:

The function 'toBlob' on 'HTMLCanvasElement' cannot be executed in react-image-crop because tainted canvases are not allowed to be exported

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Implementing full-height list elements using CSS

Using Javascript regex to remove spaces inside parentheses

The functionality of socket.io is not functioning properly on the server, resulting in a 404

Experiencing difficulty in successfully updating a React child component when the prop passed from the parent component is

Personalized cursor that blinks while utilizing window.history.replaceState

Adding JavaScript in the code behind page of an ASP.NET application using C#

What is the process for utilizing SWR to display information from a GraphQL Apollo Server within a NextJS application?

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application

Images with fixed positions will be displayed in one div and hidden in all others

How to locate the index.js file within my application using Node.js?

Tips for repairing a button using a JavaScript function in an HTML document

retrieving the selected radio button value with a pop-up message

Using Python API to directly upload web files to Drive via URL