lyqht / mini-qr Goto Github PK

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.

• Tech
• Individual

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

There's a CORS issue

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:

Full vCard (Issue Present):

Slightly reduced vCard (Working Fine):

Environment:
Docker container

A quick “paste and go” version designed specifically for mobile version of the website.

What is it?

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,

• the qr code preview should only reflect the first link
• copy qr code should be hidden since it doesn't make sense to copy multiple images.

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.

currently

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

possible solution

For desktop, just make qr code sticky/fixed.

For mobile, there are a few possible ways to do this:

1. Show a small version of the qr code at the side while user is at settings, then when they reach the actual qr code section, the small qr code should zoom/transform into the main qr code OR
2. Use a bottom sheet (preferred)

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