monospaced/angular-qrcode

[DEPRECATED] QR Code elements for AngularJS.

angular-qrcode's Issues

Link Behavior added in version 4.0 ought to be configurable

Hi,
this is a great directive; we love it.
But the automatic injection of the anchor tag that was added in version 4.0 is not good for us.
Wishing there was a config option to disable this feature on a use-case basis.
Is the idea to simply edit the template?

This is under The MIT License (MIT) ?

Hi Scott,

This is under the The MIT License (MIT) ? , I would like to bring it to my project.
https://opensource.org/licenses/mit-license.php
Waiting for your feedback.

Thanks,
Krittapak.s

Download qr code with unique name

Hi,
Currently downloading qr code giving name of qrcode1... qrcode(n) but i need to download as with my unique name. how can i do that?
eg: user1.png(user1 is qr code name)

not an angular project

guys,
This is not working for me..please help me to solve the issue
Thanks in advance...

Linked QR Codes don't work with long URLs

When I try to generate a QR Code linking to the following URL:

http://www.mydomain.com.cn/qr/aW1nSWQ9aW1hZ2VJZCZvYmplY3RJZD1RUl9DT0RFX1RFU1QmcHJvZmlsZUlkPTE0Mjg1MDI3ODI1NTQyJnNob3dJZD1JbWFnaW5hdGlvbl9TaG93

it doesn't work, i.e. the AngularJS directive doesn't generate the QR Code. I got the same behaviour in the demo: http://monospaced.github.io/angular-qrcode/

This is how I declared the

< qrcode version="4" error-correction-level="M" size="570" data="{{souvenirUrl}}" href="{{souvenirUrl}}">

Any thoughts?

url too long

─ angular#1.4.9
─ qrcode-generator#0.1.0 url:"https://www.example.com/conat/oautea/author?appid=wxe111111111&redirect_uri=http%3A%2F%2Fwww.example.com%2FWhPortal%2Fdest%2Findex.html%23%2Fsharing-courtesy%3FshareOpenId%3DoodLc1Xb11111110p2VNv2sU%26shareRuleId%3D1002012&response_type=code&scope=snsapi_userinfo&state=12354#wechat_redirect" this url is too long qrcode disappeared ,qrcode-generator version is lower?

Not see nothing

Everything is OK but I can't see the QR. My code:

<qrcode version="15" error-correction-level="M" size="274" data="fkewhasdjfhakjsdhkjashdkjahsdasdjkhaskjdhahsdkjhasd"></qrcode>

And the scripts:

<script src="bower_components/jquery/dist/jquery.min.js"></script> --> v2.1.3
<script src="bower_components/angular/angular.min.js"></script> --> v1.3.15
<script src="bower_components/angular-qrcode/angular-qrcode.js"></script>
<script src="bower_components/angular-qrcode/qrcode.js"></script>
<script src="bower_components/angular-qrcode/qrcode_UTF8.js"></script>

Thanks.

add support for href target

I would like the href to get a target="_blank", so that following the link will open a new window.

"qrcode" global naming has conflict with another library which scans qrcode

as a simple workaround you can rename the qrcode function.

barcode type Datamatrix

Currently the type of barcode is QR. it will be helpful if you add other types as DataMatrix ...

add support for quiet zone

hello,

is there a way to add a quiet zone on the generated qr-code?

AFAIK the underlying qrcode foundation library has it ready to use.

Copy QRCode with CTRL+C

Hello there! I have a slight issue here.
I am using the plugin in Ionic/Cordova, and am trying to make it Copy-able, but had little success so far.

My code looks something like this:
`

`

And I am not able to copy the QRCode at all, neither via selecting it and pressing CTRL-C, nor directly right-clicking on it and saying "Copy"

Am I doing something wrong?

qrcode is not defined

I am getting this error in console and the QR code is not visible in my application. Even it is not visible on http://monospaced.github.io/angular-qrcode demo site

download not working in IE(11)

Hi,

I'm looking into using this directive to generate downloadable qr codes for my users, unfortunately the vast majority of these users are using Internet Explorer, and are not allowed to install / use anything else so I need a solution that works on IE.

I have tested the demo page for this project, and it does not seem to work with IE (I've tried with version 11) - is there a way to get it working for IE. (not eaven right clicking on the qr code works, as IE does not seem to see canvas as an image it can save...)

I have got the qr-code generation working on my site, but download does not work at all, not even on Chrome or FireFox, but I'll keep investigating that if I can get IE to work cause that's the main concern.

Doesn't support encoding of >26 characters

Been attempting to encode a URL of 30+ characters and when the generated QR is scanned, the data returned is empty.

http://stackoverflow.com/questions/12764334/qr-code-max-char-length

QR's should definitely be able to store more than 26 characters.

Cannot print small QR codes in Google Chrome

In a recent update it seems that Google Chrome is no longer printing QR codes that are 256 pixels or less (seen on Chrome 43 Windows and Mac). This problem does not seem to affect a different canvas-based qr code module. Enabling the download option also seems to allow the QR code to print.

To test, open the demo page in Chrome and print the page. The print preview shows all three QR codes. Next, change the size to 256 and print. Only the downloadable QR code is displayed in the print preview.

This seems to be caused by a recent browser update and does not affect other browsers as far as I can tell. However, hopefully there is something you can think of that might fix it!

not displaying QR code

QR code is not displaying the some urls and also i will get value from the server and that is not working at all

Error not working

hi guys,
The serve command requires to be run in an Angular project, but a project definition could not be found.
I found this kind of error in this angular project. Not an angular-qrcode.

`size` attribute does not work on my site.

I followed the demo to generate the qrcode. But the size attribute in the qrcode does not work properly. It only changes the image quality, but not shows the actual size in the browser.

download not work on ionic

I use this with ionic and i found download not work, any one can help? thx ^_^

Calculate version automatically from the input data and selected error correction level

On reflection, doesn't make much sense to allow combos of data, version, and error correction level that just result in over-capacity errors.

Would be more useful to ensure a valid qrcode is always created by looking-up and applying the appropriate version based on the data length (in bits) and selected error-correction-level. Could then give data a max-length of 23648, and it would always generate a valid qrcode up to that limit.

Printing issues

Hi. how to print the rendered barcodes ? i use the module ngPrint. but it doesn't render on the preview.

Rename qrcode.js file

It conflicts with the other, required qrcode.js, which is very bad form. Not only is it confusing, but build scripts (like mine) will overwrite one because they are not uniquely identified.

I suggest angular-qrcode.js.

How to print on a device

I am trying to print the qr code in the HTML I pass to a print plugin. But the QR code is not showing. How can I create a temp file to pass the path of to the printer? Or even better yet how can I get the DATA URI that is generated and use it in my component.

String length >62 than not generate qr code.

If string character is greater than 62 than it's not able to generate qr code. I can reproduce .
code length overflow. (652>512)

need supurt hash or something~when i use the router!

if i wan't a link like data="http://www.google.com/user/frend#/local/list/1?key=11";
is dosn't work ,but data="http://www.google.com/user/frend" is ok~
can you fix it?

Download is not working on MS Edge

angularjs bower

how to install this qrcode using bower component?

'download' option could be the size of downloaded image

The 'download' option could be the size of downloaded image.

With this feature we could render a preview of the qrtoken and render a bigger downloaded image.

Canvas

Any way to render this into canvas?

I can't get it to work? What am I doing wrong?

I'm trying to use angular-qrcode, but I can't seem to get it to work. I tried using it in the angular-phonecat tutorial app here: kramer65/angular-phonecat@6e686f4

Unfortunately it doesn't return anything; no qr-code, but also no error. Simply nothing.

Does anybody know what I'm doing wrong? All tips are welcome!

QrCode not show

Hello , I am trying to generate my qrcode , however it does not appear , did the integration exactly as requested , someone could help me ?

The following are the codes and print .

<ion-content class="page-listagem-ingresso">
        <ion-slide-box show-pager="true">
            <ion-slide  ng-repeat="(key,ingresso) in ingressos">
                <ion-content>
                    <div class="list">
                        <div class="item item-image capa" style="margin-top: 70px;">
                            &nbsp;
                        </div>
                        <div class="item" style="border-bottom: 4px solid #9E367A;">
                            <h2><b>{{ingresso.event_name}}</b></h2>
                            <p>{{ingresso.date}} | {{ingresso.genre}} {{ingresso.lote}}</p>
                        </div>
                    </div>
                    <div class="qr-code" ng-repeat="(key,code) in ingresso.ingressos">
                        <qrcode version="2" error-correction-level="M" size="200" data="code.user_invite_code"></qrcode>
                        <p>{{code.user_invite_code}}</p>
                    </div>
                </ion-content>
            </ion-slide>
        </ion-slide-box>
    </ion-content>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="js/tabSlideBox.js"></script> 
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <!-- your app's js -->

    <script src="js/paypal-mobile-js-helper.js"></script>
    <script src="lib/ionic-native-transitions/dist/ionic-native-transitions.js"></script>
    <script src="js/qrcode.js"></script>
    <script src="http://monospaced.github.io/bower-qrcode-generator/js/qrcode_UTF8.js"></script>
    <script src="js/angular-qrcode.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>

  <script>
        fbAsyncInit = function()
            {
                  FB.init({
                    appId      : 'xxxxx',
                    cookie     : true,
                    xfbml      : true,  // parse social plugins on this page
                    version    : 'v2.2' // use version 2.2
                  });
            };
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));

    </script>

  </body>
</html>

Could you help me?

Long URL not working

I tried to use long urls in my qr-code. Seem as if there is a limitation to 62 characters?!

need to assign qrcode to variable.

Is there any way to assign the qrcode to variable, I need this to share in Facebook..

qrcode will not be generated when 'data' string is too long

when data='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'

I cant Download the QR

i got everything ok, but the download propertie just doesnt work.

<qrcode> doesn't appear to work within ng-repeat

Hello:
I'm trying to use within an ng-repeat element, and it doesn't appear to work.

Here's an example of the failure as a modification of your original example code:

<!DOCTYPE html>
<html lang="en-gb" data-ng-app="monospaced.qrcode" id="ng-app">
<head>
  <title>Angular QR Code</title>
</head>
<body ng-init="text='here comes qr!'; xs = [{name:'one'},{name:'two'},{name:'three'}];">
  <h1>Angular QR Code</h1>
  <p><input type="text" ng-model="text" maxlength="26"></p>

  <qrcode version="2" error-correction-level="M" size="274" text="{{text}}"></qrcode>
  <table >
    <tr ng-repeat="x in xs">
        <td>{{x.name}}</td>
        <td><qrcode version="2" error-correction-level="M" size="129" >string</qrcode></td>
    </tr>
  </table>
  <qrcode version="2" error-correction-level="M" size="129" >string</qrcode>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="//monospaced.github.io/bower-qrcode-generator/js/qrcode.js"></script>
  <script src="qrcode.js"></script>
</body>
</html>

At this time the only hint I have as to part of the source of the problem is that it appear the "text" gets longer at each iteration of ng-repeat, since I note the version size needs to be very large to support many iterations without throwing an error.

Add it on npm?

Hey,

Thanks a lot for the module!
Would it be possible to publish it on npm? I am using browserify so this would be very appreciated :)

Many thanks

Arnaud

output blurry

when using angular-qrcode and printing the generated codes the output get quite blurry on smaller sizes (<250). >250 the output is sharp. Is there a way to switch to DIV render mode?

Angular2 support?

Will this be updated to angular2 and if so, do you have a timeframe? I'm willing to donate some BTC to get this done it's a major blocking issue for us. Thanks!

Unable to detect non-binary characters

Hi there,

Been working on setting up my site to create a qr code for a link. The issue I'm having is no matter what the alphanumeric combination, it only reads as binary type. Is there a way to hard code the "alphanumeric" type into the tag?

NB: the total number of characters in the url including forward slashes and .com is 32. It should allow me to use version 2 but it doesn't. I've tried this on the online demo and on the zip file but coming accross this same issue.

qrcode version="2" error-correction-level="M" size="200" data="HTTP://SOME32CHARURL.COM/QR/HERE"
and
qrcode version="2" error-correction-level="M" size="200" data="HTTP://SOME32CHARURL.COM/QR/{{here}}"

Thanks in advance.

Support for version > 10

Is it planned in near future to support versions higher than 10? And I think that it would be a good idea to limit it to version 10 in demo page. I had missed the point in readme where it states that the versions are supported up to lvl 10 and demo may suggest that there is no such restriction.

Wrong qrcode-generator version in bower.json

bower qrcode-generator#v0.2.0 ENORESTARGET No tag found that was able to satisfy v0.2.0

Additional error details:
Available versions in git://github.com/monospaced/bower-qrcode-generator.git: 0.1.0, 0.0.3, 0.0.2, 0.0.1, 0.0.0

Download without showing image

Option for download the QR-Code without showing the image.

<qrcode></qrcode> error

Hi i got this error :

angular.js:13236 ReferenceError: qrcode is not defined
    at setData (angular-qrcode.js:63)
    at angular-qrcode.js:166
    at angular.js:7955
    at m.$eval (angular.js:16820)
    at m.$digest (angular.js:16636)
    at m.$apply (angular.js:16928)
    at g (angular.js:11266)
    at t (angular.js:11464)
    at XMLHttpRequest.u.onload (angular.js:11405)

While put tag. How do i resolve this problem?

qrcode is not defined

@monospaced

Uncaught ReferenceError: qrcode is not defined qrcode_UTF8.js on line 59

My import code:

import 'angular-qrcode/node_modules/qrcode-generator/js/qrcode.js';
import 'angular-qrcode/node_modules/qrcode-generator/js/qrcode_UTF8.js';
import 'angular-qrcode/angular-qrcode.js';

angular.module('app', ['monospaced.qrcode'])

Template code:

<qrcode data="{{vm.code}}"></qrcode>

NOTE: I'm using webpack

Cannot handle link with query parameters

I tried

<qrcode version="4" error-correction-level="H" size="274" data="http://localhost:3000/view?order=111111"></qrcode>

but without the parameter, it works.

<qrcode version="4" error-correction-level="H" size="274" data="http://localhost:3000/view"></qrcode>

Enforce maximum information capacity limits

Currently the directive allows you to enter more characters than the maximum permitted for the selected Version and Error Correction Level, causing a JS error in the qrcode generator library.

Not sure if this logic really belongs in this directive (it might), but to make a true, 'qrcode generator in browser', would need to enforce these limits somewhere/how.

Download and href options not working with angular 1.3.x

QR with logo in center

It is possible to create the code with a image in the center?