lyqht / mini-qr Goto Github PK
View Code? Open in Web Editor NEWMini accessible web app to generate customized qr codes easily 👾
Home Page: https://mini-qr-code-generator.vercel.app
License: GNU General Public License v3.0
Mini accessible web app to generate customized qr codes easily 👾
Home Page: https://mini-qr-code-generator.vercel.app
License: GNU General Public License v3.0
Based on https://socialsharepreview.com/?url=https://styled-qr-code-generator.vercel.app/
The recommended image ratio for an og:image is 1.91:1. The optimal size would be 1200 x 630.
Randomize style is fun, but it will be nice if there are standard presets available for usage already.
Downloading an SVG with any settings on Opera and on Firefox creates a 1.98 MB file that has no layers when opened in Inkscape or GIMP.
Users might wanna keep their qr code images in the cloud. Supabase is a good choice for that.
With more contributors adding their own presets to this project, it might get a bit cluttered at the presets select dropdown. Should update the select input to show grouped presets e.g.
Hello everybody !
I encounter a problem, when I want to install the proposed docker-compose.yml, it tells me that the manifest does not suit my architecture, do you think you can help me?
Thanking you in advance !
When loading a saved qr code configuration the following options are not loaded and defaults to 0
"imageOptions":{"margin":5}}
Seeing an error in Firefox and the copy does not work.
Uncaught (in promise) ReferenceError: ClipboardItem is not defined
UL https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:28
promise callback*UL https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:28
de https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:28
Rt https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:1
at https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:1
n https://styled-qr-code-generator.vercel.app/assets/index-be8c1718.js:1
If you use any SVG link from Icones, it works as intended, however for certain links like
https://uilicious.com/assets/images/brand/cake_logo.svg
This shouldn't happen. Seems to be stemmed from the qr-code-styling library where there's many issues about CORS that are left open.
I am wondering how to self install this on my own server and website. I can not find how to do it in the readme or anywhere else. Is this supported, or do I need to use your website?
Hi,
Is it possible to have an option to enable transparent background when exporting to PNG ?
Thank you.
Allow users to download and use the app offline on mobile
I'd really like to run this using my own bandwidth. I've installed vite, but it fails to build saying there's no container. How can I build this so I can run it on my own server?
Description:
I've encountered an issue where the generated QR code becomes significantly compressed when using a full vCard with all details. The QR code appears in the center of the image with large borders, making it difficult to scan. However, if I remove any of the long lines, the QR code snaps back to its expected size, filling the image area correctly.
Steps to Reproduce:
Create a Docker container to generate a QR code for the following vCard:
BEGIN:VCARD VERSION:3.0 FN:John Doe N:Doe;John;;; ORG:Company Name TITLE:Job Title TEL;TYPE=CELL:+1234567890 TEL;TYPE=WORK:+0987654321 EMAIL;TYPE=WORK:[email protected] EMAIL;TYPE=HOME:[email protected] ADR;TYPE=WORK:;;123 Main St;City;State;Postal Code;Country URL;TYPE=WORK:https://www.companywebsite.com SOCIALPROFILE;type=twitter:https://twitter.com/username SOCIALPROFILE;type=linkedin:https://www.linkedin.com/in/username SOCIALPROFILE;type=instagram:https://www.instagram.com/username END:VCARD
Observe the generated QR code, which appears compressed in the center with large borders.
Remove any line below TITLE:Job Title (the long ones except END:VCARD), regenerate the QR code, and notice that it fills the image correctly.
Screenshots:
Slightly reduced vCard (Working Fine):
Environment:
Docker container
A quick “paste and go” version designed specifically for mobile version of the website.
All specific options would be hidden under “advanced menu”, but no worries presets will remain!
To save the "QR code" into Photo gallery you could use the native option (depends on OS, in iOS hard press on the image)
It will be convenient if users can provide URLs as a multiline string like this
https://github.com/lyqht/mini-qr/issues/32
https://github.com/lyqht/mini-qr/issues/33
and you can choose to save all of the QR codes in a single zip folder.
However, in bulk data export mode,
I wanted to thank you for such a great app! It is really great!
Wanted to check if you are planning to make any API protocol to generate QR codes on a fly via <img src="">
on a webpage (dynamically changing parameters)
Something like:
https://localhost/api?data=https://github.com
&error=H
&logo=https://avatars.githubusercontent.com/u/1327411?s=80&v=4
&background_color=
&dots_color=
&corners_square_color=
&corners_dot_color=
&width=
&height=
&margin=
&image_margin=
&border_radius=
&dots_type=
&corners_square_type=
&corners_dot_type=
It will be highly appreciated!
At the moment, the qr code is resized when width and height changes for preview. This was implemented as such because we use the dom-to-image
library to convert the element into an image for exporting, so we had to visually show the element somewhere to be converted.
However, this is not good if users are trying to create big QR codes on mobile.
Their logo url has changed, so it causing the whole QR code to not render as expected
Some links destroy the default code indentation. For example, https://test.test/sdfsdfsdfsdfsdf
Hi, im here for asking for a new feature that i think can be nice and useful, if it can be added a frame (with customizable background color, text color, font type).
Thanks in advice.
Right now you can save and load qr config files, but it will be nice when you save it, a preset is also saved for the user so they don't have to load from the qr config file.
We can do a browser cache to save &load the preset first while we don't have user auth yet.
On desktop, if u have to scroll down to play w the settings at the bottom, you will have to scroll back up to see the preview.
On mobile, it's intentionally designed so the user see the settings first before seeing the QR. However this leads to a similar problem of having to scroll down in order to see the QR
For desktop, just make qr code sticky/fixed.
For mobile, there are a few possible ways to do this:
It will be good after adding the logo, we would be able to randomize an appropriate color palette of the qr code even without having to manually input colors on our own
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.