kozakdenys / qr-code-styling Goto Github PK
View Code? Open in Web Editor NEWAutomaticly generate your styled QR code in your web app.
Home Page: https://qr-code-styling.com
License: MIT License
Automaticly generate your styled QR code in your web app.
Home Page: https://qr-code-styling.com
License: MIT License
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.
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?
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.
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.
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"); }
Hi,
Is it possible to configure the QR code for getting round shape instead of square, we have only round PNG.
Thank you
I dont seem to be able to generate more then 100 QR codes in one page
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...
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
qr-code-styling/src/core/QRSVG.ts
Line 174 in 2e3d6b3
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.
Hi,
It could be nice if there was an export function to base64
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
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.
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?
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
Hello is it possible to display the qrcode on an html page as a png and not as canvas, if so how?
Thanks
We need to add support for a few extensions (PNG, JPG, SVG)
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.
It would be cool if you can set the name of the file been downloaded instead of just "qr.png" as default.
A wider array of data as an input for the QR coder would be nice :). I can think of the vcards as an example.
👋 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.)
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.
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?
"add Data" appends data to already existing data, it should rebuild the QR with new data.
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
Steps to reproduce
Now, either the SVG logo wont show up or the QR core scan wont produce any output
Hey,
Do you provide some documentation or snippets for use with Nuxt?
Thank you
Браузерные онлайн сканеры QR кодов используют библиотеку zxing.js для расшифровки. Почему-то ни один из создаваемых в Вашей библиотеке QR-код не расшифровывается... может быть Вы подскажете, в чем может быть причина.
Ваши QR - коды расшифровываются многими приложениями, но онлай сканерами нет.
Вот попробуйте расшифровать здесь: https://dewiar.com/scan
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?
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.
Если при активации библиотеки установить формат генерации QR-кода в SVG, а затем сохранить его на компьютер - сохраняется только начальная версия QR-кода, при дальнейшей модификации QR и попытке сохранить скачивается та самая первая версия QR-кода, которая получилась при загрузке страницы и начальной активации библиотеки.
Эта проблема есть только при SVG, если же выбрать канвас, проблемы такой нет, все сохраняется хорошо и правильно.
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.
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!
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?
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
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
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 👍
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.
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.