kozakdenys/qr-code-styling

Automaticly generate your styled QR code in your web app.

qr-code-styling's Issues

Offline mode and WebView

I tried to use this cool library inside an offline WebView Android app. While testing the HTML in the browser, it worked great! But, now... that I've compiled the app and try to download the resulting image, I get the banner:

Can only download HTTP/HTTPS URIs

Is there any chance to get rid of this from the library itself? I've seen people using this work-around to solve the problem with the MIME type, but I don't know how to implement it in your code:

var imageData = canvas.toDataURL().replace(/data:image\/png;base64,/,'');

Sorry, not a programmer, just an enthusiast wannabe. Please, let me know if you could solve this. I'm really counting seconds to get it done and finish this project.

Basic user manual?

Looks like a great project - used by someone that I know!

However, as a complete noob, I don't know how to download it and install it onto a CentOS system.

Once it is there, I wouldn't know how to use it!

Could there be a very basis set of instructions written for this, please?

Download to SVG

Hi Denys, I wanted to know if it will be possible on a near future to add svg as one of the download file extensions.

I see it really useful to me because for a couple of projects I need to embed svg Qr codes on my pages, and I think that I'm not the only one with the same need.

This is just a recommendation, there is no need or hurry to add it! I love this project and I want to see how it grows.

Multiples downloads dont work

First of all I apologize for my English, it is really bad.

When Downloading a QR (Angular) and generating a new one without updating the component, the download returns to the old QR.

I am working on a site that makes QRs for which I need that after downloading a QR I can generate another without refreshing the WEB. The problem is that when I generate the second one I download the first one again. I think the error is here but I'm really not sure

export default function downloadURI(uri: string, name: string): void {
  const link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

The download works on the same file it should always be destroyed after downloading or they should be different.

Importing QRCodeStyling into NextJS immediately fails

Using version 1.3.4

Simply adding
import QRCodeStyling from "qr-code-styling";

causes the package to immediately fail with server error:
ReferenceError: self is not defined

The library does not check to verify it's running client side.

Workaround for now is to replace the import statement with
if (typeof window !== "undefined") { console.log("i am client"); const QRCodeStyling = require("qr-code-styling"); }

Need a Option for DotSize ?

Cover by unit tests

Image round outline

Hi,

Is it possible to configure the QR code for getting round shape instead of square, we have only round PNG.

Thank you

@kozakdenys

Is there a hardcoded limit of QR's to generate?

I dont seem to be able to generate more then 100 QR codes in one page

Add support for React

Support ES6 import function

Hi, maybe i'm too stupid, but I tried to import your lib as ES6 module, but always getting an error. I had a look and couldn't find any hints for this. Is it possible to create an extra export as ES6 Module? E.g.:

import { QRCodeStyling } from '/lib/qr-code-styling.module.js'

This would really save my day!

Or you can point me to the right configuration so I can export/create it by my own? Unfortunately I'm not in to TypeScript config...

not rendering correctly

When creating 2 QR codes in the same page, the image is completely black in the 2nd rendered one. I have done some digging and found that the problem is that the rects are using the same id for clip-path #clip-path-dot-color here

qr-code-styling/src/core/QRSVG.ts

Line 420 in 2e3d6b3

rect.setAttribute("clip-path", `url('#clip-path-${name}')`);

qr-code-styling/src/core/QRSVG.ts

Line 174 in 2e3d6b3

this._dotsClipPath.setAttribute("id", "clip-path-dot-color");

It needs to be changed to be different with each new QR code created or find another way to draw it without using an id if possible, I am not experienced enough with svg to do it.

Create circle shape of QR code

Export to base64

Hi,

It could be nice if there was an export function to base64

crop marks

Hi Denys,
Thanks for this great library.
I am working on css crop marks for cutting the generated qr codes.
Maybe interesting include these in the qr generation process??

Thanks

Support for urf8 characters

Great work Thanks

How can we add support for non English characters, I'm trying to add data in Arabic and the readers are not able to decode the characters back properly.

padding in canvas and download image resolution

Thanks for the great library.

I have a question.

as you can see in the image I can't able to give a margin in the downloaded .png. QR is visible in the corner of the image too.
how can I achieve this?

2nd Question: The image has the same resolution as the canvas has. Can we somehow download images with a better resolution without increasing the size of the canvas?

does not draw qr in angular

cannot figure it out, why the append method of thr module doesn't add image into the div id=qr

show-qr.component.ts:

import {Component, Input, ViewChild} from '@angular/core';
import {CommService} from "../comm.service";
import QRCodeStyling from 'qr-code-styling';

@Component({
  selector: 'app-show-qr',
  templateUrl: './show-qr.component.html',
  styleUrls: ['./show-qr.component.scss'],
})
export class ShowQRComponent {
  @Input() dialogKey: number;
  //@ViewChild('qrImg') qrImg: any;

  private qr: QRCodeStyling;

  contReady = false;

  constructor(public c: CommService) {
    this.qr = new QRCodeStyling({
      width: 300,
      height: 300,
      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
      }
    });

    this.qr.append(document.getElementById('qr'));

    console.error(this.qr); // it shows inited QRCodeStyling object in console

    this.contReady = true;
  }
....

show-qr.component.html:

...
<div id="qr" style="width: 300px; height: 300px; background-color: #3dc2ff">
  </div>
...

package.json:

...
"dependencies": {
    "@angular/common": "~9.0.4",
    "@angular/core": "~9.0.4",
   ....
    "qr-code-styling": "^1.3.4",
...

any idea guys?

thanks

HTML seen png not in canvas

Hello is it possible to display the qrcode on an html page as a png and not as canvas, if so how?
Thanks

Add a possibility to download generated QR

We need to add support for a few extensions (PNG, JPG, SVG)

This expression is not constructable. Type 'typeof import("/sandbox/node_modules/qr-code-styling/lib/index")' has no construct signatures.ts(2351)

I am not able to make this work in Angular. Here is your example: https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts

As you can see, there is an error in the example code where it says new QRCodeStyling() as QRCodeStyling is not constructable.

I have tried changing import * as QRCodeStyling from "qr-code-styling"; to import QRCodeStyling from "qr-code-styling"; but it still doesn't work.

I'm using Angular 12.2.3.

Please advise.

Change title of download

It would be cool if you can set the name of the file been downloaded instead of just "qr.png" as default.

Diverse data input sources for the QR

A wider array of data as an input for the QR coder would be nice :). I can think of the vcards as an example.

Doesn't Work With Node

👋 hey there. you should put a big 'ol disclaimer at the top of your README that this doesn't work with Node, and only works in client-side browser apps.

(And this is actually kind of a shame, because I think if you separated the browser-specific code and shipped the compiled TS instead of the webpack bundle, this would work on node.)

New styles to the library ?

Hi Denys,

Is there a chance you add a new style to the library on the « cornersDotOptions » and the « cornersSquareOptions » to get closer to the attached file (kind of Butterfly, close to the « extra-rounded ») and maybe a « thinner dots » on « dotsOptions » (witch looks nice too) ?

Thanks for all.

Bests regards,
Patrice.

Node.js support

Hey,
I'm building a mobile application using flutter, I'm planning on using google cloud functions to build the QR code and relay it to the app as a png/svg. Is there any way I can use this with node.js?

Can't dynamically rebuild an QR code

"add Data" appends data to already existing data, it should rebuild the QR with new data.

Download Method

Hello,

I wanna download my qr but, on call download method, this image comeback blank.

Example:

something is wrong in this library.

this lib is dependent on https://kazuhikoarase.github.io/qrcode-generator/js/demo/.

when I create a QR there it's scannable from all devices and all QR apps.

but when I create the same QR from https://qr-code-styling.com/ without(image and styling) it's not scannable from less popular QR apps.

how this is possible?

reference app for android: https://play.google.com/store/apps/details/?id=com.mrakash.qrcodescanner
ios: Facebook app, QR scanner Pro

Firefox wont render correct QR code when you are a logo

Steps to reproduce

0. Use firefox
1. Visit https://qr-code-styling.com/
2. Add an SVG logo

Now, either the SVG logo wont show up or the QR core scan wont produce any output

Use with Nuxt

Hey,

Do you provide some documentation or snippets for use with Nuxt?

Thank you

Ни один QR код, созданных в этой библиотеке не расшифровывается онлайн сканерами!

Браузерные онлайн сканеры QR кодов используют библиотеку zxing.js для расшифровки. Почему-то ни один из создаваемых в Вашей библиотеке QR-код не расшифровывается... может быть Вы подскажете, в чем может быть причина.
Ваши QR - коды расшифровываются многими приложениями, но онлай сканерами нет.
Вот попробуйте расшифровать здесь: https://dewiar.com/scan

[svg] Gaps between QR code elements

Hi all. When generating SVG and its zoom I get gaps between elements of QR code.
Why is this happening?

No viewBox for SVG

Hi, love the tool. I'm having a small problem with resizing the QR. In order for the PNG to export at the resolution required, I'm changing the width and height options to 1200, but this makes the SVG preview very large in the page, and I need it to stay small while being previewed.

This would be easy to do with CSS, but to resize an SVG you need a viewBox attribute specified and currently there isnt one, can you advise?

Same QR code when multiple shown in a single page

I am seeing the same QR Code when I try to show multiple in a single page, I am using this in a Vue project, anyone knows how to fix this.

i cann't set margin

Сохранение QR-кода работает неверно в случае SVG формата, если CANVAS - скачивается хорошо.

Если при активации библиотеки установить формат генерации QR-кода в SVG, а затем сохранить его на компьютер - сохраняется только начальная версия QR-кода, при дальнейшей модификации QR и попытке сохранить скачивается та самая первая версия QR-кода, которая получилась при загрузке страницы и начальной активации библиотеки.
Эта проблема есть только при SVG, если же выбрать канвас, проблемы такой нет, все сохраняется хорошо и правильно.

Loading Image from Firebase / Google Storage

Hello guys,

i am just playing around with loading different images. I have no problems loading svg's. Now i try to load a image from a url like this

https://firebasestorage.googleapis.com/v0/b/yamnam-dev.appspot.com/o/tenant%2Fvls9eC78hqhqSyGgta0E%2Fmargarita-zueva-SPeXhfb3tFI-unsplash-oVsCXdv-z.png?alt=media

Is there a change to implement this? Otherwise i try to create a fork.

Thanks in advice.

Compatible with React Native

Hello, there. Wanted to figure out is this library compatible with react native? If yes, are there any examples of implementation? If not, are there plans to support in the future? Thanks in advance!

Usage with Angular

Heya, I'm fiddling with this library in Angular. It doesn't seem to be binding to <div id="canvas"></div>
Have you ever used this with Angular/is there any documentation for usage with NG?

createDataURL create not styled QR

I try to use this QR with React
const QR = qrCode._qr.createDataURL(); // this function make not styled QR, but if use download method QR will be styled.
Options just like in example

Data does not support Chinese

Data does not support Chinese? show Mistaken Code, such as

Add the option for color gradient

Hello out there,

first thanks for this great library!
I need to add an color gradient to the qr code.
Actually its not possible. I think the following snipped should do it (correct me i am wrong):

QRCanvas.ts Line 61:

var gradient = ctx.createLinearGradient(20,0, 220,0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

Of course we need some parameters for this, but it would be very great!

Thanks in advice and greetings

Angular Universal compability

Hey Mate,

we use your library in our angular application. Everything is working smooth, thanks for that.

I just got a problem when i use angular universal combined with this library. We need Angular Universal for Server Side Rendering in case of SEO optimizing's.

i know, this is a angular univeral specific issue, but you may can help us. 🥇

The build step runs without problems. But when i try to serve the App i get a error:

ReferenceError: self is not defined

this are the lines where the error occurs:

Do you have any ideas what i can do to make this run?

Thank you, have a great weekend 👍

Url length affects whitespace on edge of qr

Adding or subtracting from the url creates/removes whitespace around the actual qr code. This does not work in a normal ratio but seems very random that it sometimes jumps up and down in size.

I don't understand why this would happen, first I thought it was due to my config but it seems its the same in codepen.
https://codesandbox.io/s/l8rwl?file=/src/App.js
Try changing the url length and see that the image appears to change in size now and then.

Downloaded QR code as SVG with image results in a broken image

The SVG image tag representing the middle image is currently just using href but probably should be encoding the SVG content and embedding it using encodeURI with "data:image/svg+xml;utf8," and the image as SVG, like you shared in a previous discussion with me?

Question: Why does the appended QR code appears different than the generated SVG?

Hi! I was wondering why is the appended QR code different than the generated SVG?
Excluding the image, the squares on the QR code don't match.

The appended QR code on the canvas

The generated SVG using qrcode._qr.createSVGTag().

feat: add extra rounded dots type

It would be really awesome to support a design like this:

It looks a bit like the 'rounded' option, but then even more rounded.

Remove padding

I need to remove or customize padding / empty space size. Excessive padding interferes with the interface.

File specs for the logo?

I tried several logos, and they just didn't work.
No output, no errors.
The svg example works every time. Not the other.
type: "png",
image:"https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png"
...
type: "png",
image:"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"

Are there defined specifications for the image files?