qrcodejs | Cross-browser QRCode generator for javascript | Generator Utils library

by davidshimjs JavaScript Version: Current License: MIT

kandi X-RAY | qrcodejs Summary

qrcodejs is a JavaScript library typically used in Generator, Generator Utils, Angular applications. qrcodejs has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i xibuqrcode' or download it from GitHub, npm.

Cross-browser QRCode generator for javascript

Support

Quality

Security

License

Reuse

kandi-support Support

qrcodejs has a medium active ecosystem.
It has 12142 star(s) with 4686 fork(s). There are 283 watchers for this library.
It had no major release in the last 6 months.
There are 166 open issues and 34 have been closed. On average issues are closed in 392 days. There are 57 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of qrcodejs is current.

qrcodejs Support

Best in #Generator Utils

Average in #Generator Utils

qrcodejs Support

Best in #Generator Utils

Average in #Generator Utils

quality kandi Quality

qrcodejs has 0 bugs and 0 code smells.

qrcodejs Quality

Best in #Generator Utils

Average in #Generator Utils

qrcodejs Quality

Best in #Generator Utils

Average in #Generator Utils

security Security

qrcodejs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
qrcodejs code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

qrcodejs Security

Best in #Generator Utils

Average in #Generator Utils

qrcodejs Security

Best in #Generator Utils

Average in #Generator Utils

license License

qrcodejs is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

qrcodejs License

Best in #Generator Utils

Average in #Generator Utils

qrcodejs License

Best in #Generator Utils

Average in #Generator Utils

build Reuse

qrcodejs releases are not available. You will need to build from source code and install.
Deployable package is available in npm.
Installation instructions are not available. Examples and code snippets are available.

qrcodejs Reuse

Best in #Generator Utils

Average in #Generator Utils

qrcodejs Reuse

Best in #Generator Utils

Average in #Generator Utils

Top functions reviewed by kandi - BETA

kandi has reviewed qrcodejs and discovered the below as its top functions. This is intended to give you an instant insight into qrcodejs implemented functionality, and help decide if they suit your requirements.

Creates a 16 - bit bit bit integer .

Get type number

Check if data URI is supported

android 2 . x

Creates a new QRCode model .

Create SVG element

set image element

Gets text length

Creates a new QR polynomial

Shorthand for testing

Get all kandi verified functions for this library.

qrcodejs Key Features

Cross-browser QRCode generator for javascript

qrcodejs Examples and Code Snippets

Community Discussions

Trending Discussions on qrcodejs

Add QR on top of html Canvas
javascript: load external library correctly
Create a qrcode image then convert to base64
Downloading a qrcode.js-generated QR code
How do i generate qr code from url in javascript
Extracting source attribute of generated img by qrcode.js
how to implement third party JS library in Odoo

Trending Discussions on qrcodejs

QUESTION

Add QR on top of html Canvas

Asked 2021-Dec-11 at 16:44

I'm trying to load a QR code into HTML5 canvas on top of a background image but it's not working for whatever reason. If I change the QR code to a normal <img> it works fine but this is no good for my purposes.

I've tried a million variations but here's where I'm at right now:

setTimeout(function() {

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var qr = document.getElementById('qrcode');
var imageObj = new Image();
var wot = new QRCode(document.getElementById("holder"), "www.example.com");

imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
qr.style.backgroundImage = "url(" + wot._el.firstChild.nextElementSibling.currentSrc + ")";

context.font = "30pt Arial";
context.fillStyle = "red";
context.fillText("QR Code should be here", 30, 100);
context.fillText("But it's not", 140, 400);
};    
imageObj.src = "https://via.placeholder.com/500x500?text=Background+Image"; 
}, );

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<div id="holder" style="display: none;"></div>

<div style="width:255px; height:255px" id="qrcode"></div>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Any help would be appreciated.

ANSWER

Answered 2021-Dec-11 at 16:44

OK so based on the update of your question its achievable as follows. First create a new <img> tag

var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;

Then inject in into the <canvas>

context.drawImage(img, 30, 100);

Source https://stackoverflow.com/questions/70300709

QUESTION

javascript: load external library correctly

Asked 2021-Oct-28 at 05:50

I am very new to this. I am trying to generate a QR code and display it in my HTMl page.

I used this code:

/* Load the library */
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

/* Basic and simple one */
<div id="qrcode"></div>

<script type="text/javascript">
  new QRCode(document.getElementById("qrcode"), "https://webisora.com");
</script>

And when put into a div, this displays a QR code as whished.

Now I tried putting it into another file from which all javascript is loaded (and already working)

So i just put it into this function which will be called upon page load:

function LoadQRCode() {
  var src = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"

  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://webisora.com",
    width: 128,
    height: 128,
    colorDark: "#5868bf",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
}

And the div:

<div class="qrcodecontainer">
    <div id="qrcode"></div>
</div>

But as no suprise, the console states that: Uncaught ReferenceError: QRCode is not defined

Which makes sense, as I dont know how to connect the loading of the libraray and he load of the QRCode variable.

But again, this code works when called directly from HTML.

HOw can I alter my function to also give me the same result?

Thank you :)

ANSWER

Answered 2021-Oct-27 at 12:47

I think this will make sense

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "http://jindo.dev.naver.com/collie",
        width: 128,
        height: 128,
        colorDark : "red",
        colorLight : "white",
        correctLevel : QRCode.CorrectLevel.H
    });
    </script>
</body>
</html>

Source https://stackoverflow.com/questions/69738912

QUESTION

Downloading a qrcode.js-generated QR code

Asked 2021-Jun-22 at 06:27

I've searched the web countless times trying to find a way to solve this but I've come up empty-handed every time. I have been using qrcode.js to generate QR codes for a website, but I haven't figured out how to download the image once it's been generated. The code I use to generate the QR code looks like this:

var myQR = new QRCode(document.getElementById("qrcode"), {
                            text: "Made with QR Generator",
                            width: 128,
                            height: 128,
                            colorDark : qrdarkcolor,
                            colorLight : qrlightcolor,
                            correctLevel : QRCode.CorrectLevel.H
                        });
                        myQR.makeCode(qrdata);

I am trying to find a way to either download the QR code within the div or find the source and create a button that users can click on to download the image. I apologize if this is a commonly asked question, but I've searched many other questions that are similar to this and haven't found a clear answer. I would prefer to keep this site with only HTML, CSS, and Javascript if possible.

Thanks!

ANSWER

Answered 2021-Jun-22 at 06:27

The image is generated through the plugin and takes a moment to render, so the method needs to be done with setTimeout. After that, we grab the src of the image and apply it to a download link (a link that has the attribute download in it)

Note this won't work in the snippet sandbox, but it's been tested on a normal web page and works great.

const makeQR = (url, filename) => {
  var qrcode = new QRCode("qrcode", {
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
  qrcode.makeCode(url);

  setTimeout(() => {
    let qelem = document.querySelector('#qrcode img')
    let dlink = document.querySelector('#qrdl')
    let qr = qelem.getAttribute('src');
    dlink.setAttribute('href', qr);
    dlink.setAttribute('download', 'filename');
    dlink.removeAttribute('hidden');
  }, 500);
}

makeQR(document.querySelector('#text').value, 'qr-code.png')

#qrcode {
  width: 160px;
  height: 160px;
  margin-top: 15px;
}

<script src="https://cdn.jsdelivr.net/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script>

<input id="text" type="text" value="https://stackoverflow.com" style="width:80%" /><br />
<div id="qrcode"></div>

<a id='qrdl' hidden>Download</a>

Source https://stackoverflow.com/questions/68077398

QUESTION

How do i generate qr code from url in javascript

Asked 2021-May-05 at 20:42

so i building a url shortner which takes the url from python and generates a QR code in along with the shortUrl, i am using jinja2template for the UI, as i am very new to JavaScript the below code is mostly copied from Youtube and Internet.

This is the class which will show the converted shortUrl and will have a copy link button next o it

            <div class = "result__container">
                <div class = "shorturl">
                    <div id="qrcode"></div>
                </div>
                <div>
                    <button onclick = "copyLink()">Copy Link</button>

                </div>
            </div>

This is the logic create the qr code I am using qrcode.min.js here to create the qrcode

    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>

    <script>
        const qrcode = new QRCode(document.getElementById('qrcode'), {
            text: response.shortUrl,
            width: 128,
            height: 128,
            colorDark : '#000',
            colorLight : '#fff',
            correctLevel : QRCode.CorrectLevel.H
    });

            xhr.onload = function () {
                const response = JSON.parse(this.responseText);
                console.log(this.status);
                console.log(response);
                if(this.status ==200){
                    resultContainer.style.display = "flex";
                    shortUrl.innerHTML = `SHORT URL :- <a href=${response.shortUrl}>${response.shortUrl}</a>`
                }
                else{
                    alert(`An error occurred, ${response.detail}`)
                }
            };

ANSWER

Answered 2021-May-05 at 15:17

Are you using davidshimjs/qrcodejs ?

When you're doing new QRCode(document.getElementById("qrcode"), url);, the lib expect document.getElementById("qrcode") to return the elem. In the html code you provided, you don't seems to have that element.

You can try to add <div id="qrcode"></div> in your html file to display the output QR code

Source https://stackoverflow.com/questions/67403923

QUESTION

Extracting source attribute of generated img by qrcode.js

Asked 2021-Apr-08 at 00:51

Like I said in the title, my problem is that I get an empty string back.

I'm jusing qrcode.js from https://github.com/davidshimjs/qrcodejs .

My Code:

    <script src="qrcode.js"></script>
<div id="qr"></div>

<img id="test" src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">


<script type="text/javascript">
var qrCode = new QRCode(
    document.getElementById('qr'),
    {
        text: 'www.google.de',
        width: 150,
        height: 150,
        onSuccess: (value) => {
            console.log('value',value);
        }
    }
);

</script>

<script>
var test = document.getElementById("test").src;
console.log(test);
var base64 = document.getElementById("qr_neu").src;
console.log(base64);
console.log(typeof base64);
console.log(base64.length);
var dom = document.getElementById("qr_neu").attributes;
console.log(dom);
var code = dom[3];
console.log(code);
</script>

The generated QR-Code works fine and in the developer settings in chrome i can see the src of both

Screenshot: console in chrome

Now I don't understand wha I can't access to the src attribute of the qr-code but on the google img.

I also tried the callbackversion descriped on the github issues section but it doesn't work either. All i want is the base64 code as var for ther applications.

Thanks for helping!

ANSWER

Answered 2021-Apr-08 at 00:51

The reason why you get an empty string back, even though you can see the src value in your dev tools, is that it takes a very short amount of time to generate the QR-Code.

So var base64 = document.getElementById("qr_neu").src;is called before the QR-Code is generated.

Here is a relevant issues on the qrcode.js repository: https://github.com/davidshimjs/qrcodejs/issues/160.

Here is the solution adapted to your code:

const qrDiv = document.getElementById('qr')
var qrCode = new QRCode(
    qrDiv,
    {
        text: 'www.google.de',
        width: 150,
        height: 150,
        onSuccess: (value) => {
            console.log('value',value);
        }
    }
);
const src = qrDiv.children[0].toDataURL("image/png");
console.info(src);

Source https://stackoverflow.com/questions/66988847

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install qrcodejs

You can install using 'npm i xibuqrcode' or download it from GitHub, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: