Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a size property to resize the qr code #6

Closed
tjbutz opened this issue Aug 13, 2017 · 21 comments
Closed

Provide a size property to resize the qr code #6

tjbutz opened this issue Aug 13, 2017 · 21 comments

Comments

@tjbutz
Copy link

tjbutz commented Aug 13, 2017

No description provided.

@techiediaries
Copy link
Owner

It gets resized automatically if it needs that

@nathanccleung
Copy link

can I resize the img for display purpose?

@techiediaries
Copy link
Owner

No it gets resized depending on the amount of data you are encoding but if you need to resize it just for display we'll make sure to add that?

@nathanccleung
Copy link

yes just for display, because the original image is quite small if the content is not long enough.

@mautematico
Copy link
Contributor

@techiediaries if you can point me on the right path, I will try to start a PR to get this feature added.

@techiediaries
Copy link
Owner

Hi @mautematico how? do u have any specific question? i.e is it about building the component or code?

@Dark-Midnight
Copy link

Dark-Midnight commented Sep 25, 2017

Hi @nathanccleung .
You can add global styles to the styles.css and use qrc-class to control the size.
Rember to set elementType.

`styles.css`
.test-class > img {
  width: 200px;
}

`your element`
<ngx-qrcode
  [qrc-element-type]="'img'"
  [qrc-value] = "'resize the QR code'"
  qrc-class = "test-class"
  qrc-errorCorrectionLevel = "L">
</ngx-qrcode>

@uzumakinaruto123
Copy link

@techiediaries @Dark-Midnight On changing styles, the qr code looks blur if its size is increased. Any chance that ngx-qrcode can generate high resolution image?

@gerard2perez
Copy link

An option to generate a High Resolution Image will be great.

@marcburkhardt
Copy link

@techiediaries Could you please reopen this issue? I ran into the same issue as @uzumakinaruto123 and I would very much appreciate it if you added a HighRes option as @gerard2p suggested.

@uzumakinaruto123
Copy link

@gerard2p @marcburkhardt If you still looking for an answer, I have found a hack. Basically, more the length of data string [qrc-value] = "data" more is the size of QR code. So temporarily you can add some redundant garbage in your data along with actual data. I am stringifying a JSON object as value.

@uzumakinaruto123
Copy link

Size also varies depending upon qrc-version = "8" ranging from 1 to 40.

@gerard2perez
Copy link

@uzumakinaruto123 @marcburkhardt I actually write a custom component and my app based on this so i could actually modify the parameters that are send to QRCode.toDataURL If anyone is interested I can make that component available to everyone.

@uzumakinaruto123
Copy link

@gerard2p would like to check it!

@ranjanakash166
Copy link

ranjanakash166 commented Feb 13, 2018

@gerard2p will like to check the component.

@Tanzeel064
Copy link

@ Dark-Midnight
It really works for me.

@bibekananda-pradhan
Copy link

please share whats the work around you have done @gerard2p

@rdev-software
Copy link

Any update ? Changing size in CSS creates blurred image

@ouassimBenMosbah
Copy link

I am facing the same issue. Any workaround ?

@sprenger-hauke
Copy link

Also trying to change the size, if possible without lowering the img quality, but no success so far. The work-around posted above with changing attributes for IMG in css isn't working for me. Help is appreciated.

@zulis
Copy link

zulis commented Jan 14, 2021

To set width just add [width]="250"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests