oblakstudio / qr-code-styling Goto Github PK

View Code? Open in Web Editor NEW

95.0 95.0 21.0 1.13 MB

License: MIT License

JavaScript 23.02% Shell 0.24% TypeScript 75.23% HTML 1.51%

qr-code-styling's People

Contributors

Stargazers

Watchers

qr-code-styling's Issues

Two svg-typed qr-codes in one page. Generates same qr-code for all two instances.

Type of qr-code must be "svg". For "canvas" type works correctly.
Moreover, settings of one reflects on another.

For this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="qr_1" style="display: inline;"></div>
<div id="qr_2" style="display: inline;"></div>

<script type="text/javascript">

    const qrCode1 = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "svg",
        data: "https://www.facebook.com/",
        image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });
    
    const qrCode2 = new QRCodeStyling({
        width: 290,
        height: 290,
        type: "svg",
        data: "https://www.google.com/",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

    qrCode1.append(document.getElementById("qr_1"));
    qrCode2.append(document.getElementById("qr_2"));
    //qrCode.download({ name: "qr", extension: "svg" });
</script>
</body>
</html>

Expected:

Got:

Sample:
https://jsfiddle.net/mz0kwdp2/13/

After zooming the page, SVG style has spaces between the dots

Demo: https://plnkr.co/edit/5b3phqOoAfYfUwBz

cannot start package within a node server

The documentation says that qr-code-styling/lib/qr-code-styling.common.js should be referenced but that file does not exists.

When trying to use it from server it says

Error: Cannot find module 'qr-code-styling/lib/qr-code-styling.common.js'

and when i substitute this reference

const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.common.js");

for this

const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.js");

it says
ReferenceError: self is not defined
at Object. (C:\www\qrGenerator\node\node_modules\qr-code-styling\lib\qr-code-styling.js:1:208)

Possibility to add arbitrary text, or margin to the QR-Code

Hi,

first thing first, thanks for the library!

Now, about the feature request, would it be possible to allow the user to add some text around the QR-Code ?
I would be interested by something looking like that:

If adding such a feature wouldn't respect the scope of the library, then a simple margin around the QR-Code would be enough, as it would allow user to add manually the text with something like this:

// var ctx = $0.getContext("2d"); //getting the canvas context in the debugger
ctx.font = "30px Arial";
ctx.fillText("Hello World", 100, 100);

What do you think about this idea ?

Canvas remains empty

I'm trying to use the library in my custom element like this:

	const qrCode = new QRCodeStyling({
		width: 300,
		height: 300,
		//type: "svg",
		data: "https://www.facebook.com/",
		image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
		dotsOptions: {
			color: "#4267b2",
			type: "rounded"
		},
		backgroundOptions: {
			color: "#e9ebee",
		},
		imageOptions: {
			crossOrigin: "anonymous",
			margin: 20
		}
	});

	let canvas = document.createElement('canvas');
	this.append(canvas);

	qrCode.append(canvas);

But the canvas remains empty. What's going wrong?

const qrCode = new QRCodeStyling(options)
const container = document.createElement('div')
qrCode.append(container)
const svg = container.innerHTML

I was wondering if there was a more elegant way of doing this?

Is it possible to extent the qr code to fill the canvas

I have a responsive design, the size of the canvas where I want to show the QR code can vary. How to I make the QR code the same size as the canvas.

I've tried setting the width and height to:

auto: Error: The provided double value is non-finite.
0: Error: The canvas is too small
10000: QR code is now to big for the canvas
Not at all: Generates at default size

Has anybody another suggestion?

oblakstudio / qr-code-styling Goto Github PK

qr-code-styling's People

Contributors

Stargazers

Watchers

Forkers

qr-code-styling's Issues

Two svg-typed qr-codes in one page. Generates same qr-code for all two instances.

After zooming the page, SVG style has spaces between the dots

cannot start package within a node server

Possibility to add arbitrary text, or margin to the QR-Code

Canvas remains empty

More QR code styles

Node support was dropped, right?

Unable to access svg string directly

Is it possible to extent the qr code to fill the canvas

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent