lazarsoft / jsqrcode Goto Github PK

Hi!
Well, I have a problem to scanning some images. when I edit the size of the image with error, it works, but then, the other qr images get the error.

Both images have the same size, but when I probe them here: http://webqr.com/ I get error with the first image.
Can anyone help me with that? this is happening with a lot of images, and I can't find why. thanks.

Image with error:

Image without error:

It could be more simple if we know if yes or not we can use, share and modify your work.

When I try to decode the base64-encoded string:

"data:image/png;base64,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"

I get a message that there was an error decoding the QR code. It should decode to http://bit.ly/HC4t2Y and does with another online decoder (zxing.org).

Hello,

Thanks for writing this library, I am looking to experiment with it however it seems that it only decodes the QR Code and doesn't provide any of the other aspects like position.

Is it possible to do this?

Thanks

Tom

On demo site reading QR from test image works offline, however generating custom one doesn't. Is this just demo issue or lib itself works only online? I was going to use it in offline webapp.

Hi, i'm still learning web-programming, and i'm a bit lost on the readme...

I know i have to upload the src folder to my ftp-host and "Include the scripts in the following order:" in the webpage, but where it comes to the functions, i'm a bit lost.

Are there any example-sourcecode on a webpage that uses this?

All i want, is to get a QR-code reader on my webpage. (identical to http://webqr.com/ )

Thanks in advance.

I tried the sample test.html include in the code base. It's need a "camcanvas.swf" file, so i created a swf (320 x 240) file after that i can see the camera preview, but i can't see it's decoding any QR Code, Can you help to me fix the issue. I need to support for browsers which are not support html5. please help.

Hello,

while searching for resources I stumbled over your project. I'm developing a website to manage a stock of devices. To make it easier for the user to input some large numbers I want to integrate scanning(w/ the webcam) and decoding barcodes, the 1D ones not QR codes.

I'm developing the site using GWT 2.5 which has JSNI support. Do you think you will integrate support for decoding barcodes? Or is it already supported?

Thank you very much,
Marius M.

I need to decode QRs with a webservice because the qrcode.decode() method is too slow on mobile.

Thanks for your time!

https://webqr.com/index.html is not able to decode QR code image with high density while Zxing decoder:

https://zxing.org/w/decode.jspx is able to decode same image.

I also tried decoding images by creating JS program with jsqr library but same result as https://webqr.com/index.html

Hi,
I have the following problem:

If I scan a big images the browser (Mobile Safari )will crash. Desktop Browser like the latest Firefox runs often into a Timeout exception.

Do you know any best practice to avoid this error? Otherwise, I will try to shrink the picture before it will be parsed by your QR Code scanner.

The code works pretty fine for smaller images.

Image info:
Image 1: 1,8MB, 3264_2448 // error
Image 2: 1,67 MB 2592_1935 // error

Thanks!

• Tobi

Hi LazarSoft,

you seem not to be maintaining this library anymore. I would like to help you or maybe even take the lead of the library.

What do you think of that ?

Best

UPDATE:

I've started a new project at https://github.com/edi9999/jsqrcode
I've started by adding a first test. You can pull request it if you would like to add something to it.

I am trying to read a QR code which has, white QR code on Black background. Is this supported by the library? Or anyway can be make it compatible. I am trying this with image upload feature.

Uncaught ReferenceError: qrcode is not defined

https://www.youtube.com/watch?v=y0n2nXBbL_Q

how hard would it be to support scanning + stiching together the codes from a looping gif?

(also opened here defunctzombie/qr.js#2)

It fails to correctly decode the attached image (whereas Java that has the correct code succeeds).

See https://gist.github.com/lgoldstein/6789366

Hi,
because of jsqrcode is a 2D code scan-library do you have any plans including a pdf417 bar code reader? What is your opinion on this. I am expecting a suggestion from you.
Thanks.

Hi , we can not use the picture from iPhone camera.
Because the picture over 2 megapixels taken from iPhone Camera lose the orientation information and will not be decoded as QR code picture correctly.

From Sarafi Developer Library site:
"JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled―that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras."

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

I think that this Apples's limits affect your QR decode function.
Because the picture will rotate and save , It will be able to be decode as QR code picture correctly.
I refer to "scan from image" ,NOT "scan from webcam" from http://www.webqr.com/.
This issue is not "getUserMedia API".
This issue is your QR Code decoder is not supported iPhone camera's spec.

Hello,
I wonder if this library is maintained?

Is there an example on how to integrate it into my web app?

Thanks

When I try and use an image with any more characters then just a simple email or website, I keep getting a thrown exception that just says 'Error'

to reproduce, just go to the demo page: http://webqr.com/index.html

upload this qr:

It works fine for small qrcodes. When I upload the same graphic to http://zxing.org/w/decode it works.

Here is what is being passed into decode:

....scanQR = function(event) {

qrcode.callback = function(result) {... }

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.onload = function() {

if((img.width == 2448 && img.height == 3264) || (img.width == 3264 && img.height == 2448)) {
  canvas.width = 1024;
  canvas.height = 1365;
  context.drawImage(img, 0, 0, 1024, 1365);
} else if(img.width > 1024 || img.height > 1024) {
  canvas.width = img.width*0.15;
  canvas.height = img.height*0.15;
  context.drawImage(img, 0, 0, img.width*0.15, img.height*0.15);
} else {
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0, img.width, img.height);
}
qrcode.decode(canvas.toDataURL('image/png'));

}

What am I doing wrong?

Hi,

I would like to know if there's a way to decode many qrcodes at the same time.

My problem is the following: I have many images I would like to decode.

Howewer, if I use qrcode.callback to put in the callback, it will override it so only the callback for the last file will be called.

Hi,
this library seems can't decode the following QR code :

It contains text 'HELLO WORLD' when scanned with my smartphone.
The problem probably is because the script can't recognize the format info pattern (it should be ECC level L with mask pattern 6).

Thanks in advance.

Getting the above error for qr codes generated from zxing

Is there a way to change camera used to scan?

When I opened on my phone, open the front camera, instead the rear camera.

If you scan a QR-Code containing the char "Ü" it returns the wrong char.

Sample:

Hi, i kind of wondering how to use it. since there's no full guidance on it.

Hey. Just wanted to let you know I made a port of this module that'll work in Node.JS

https://github.com/vicapow/jsqrcode

i use encryption for the text, and make it to QRcode but went i want scan it, it say "error decoding QR Code" i try it in your web online and i get the same result. but went i try it in zxing.org it work properly, can you fix it???
this i give you my qrcode example

i try to use jsqrcode on electron application with stream decode, but it just scan only one time, when i start the webcam again it say "qrcode.decode is not a function", i want to know how to use it for multiple times

the code not work in smart devices, don't ask for enable the camera is coming. just stay blank.
someone know hot to solve this?

Since the new Chrome version 53 there is an error on your example site https://webqr.com/

Failed to load resource: The server responded with a status 404 (Not Found) [object%20MediaStream]

The src of the video tag is missing.

Anybody any idea what changed in chrome 53? I did not found any information within the chrome developer announcements according to this behaviour.

Since Chrome 52 everything was fine.

I tried to import the NPM package into a Webjar, but it fails because the package has no license registered.

how can i change from front cam to rear cam?

when i run test.html,it is tip error:Failed to load the image
how can i fix it?

Dear,

Thanks for creating this QR JS Library,
Appreciate it!
May i know is it possible to use this library creating some QR Code like what shown in image? Thanks

Hi,
I've tried to use this library on iphone and it never succeed to analyse the qr code.

nothing bad is happening, and the library return a result, but the result is always the same: error decoding QR Code

I used the same code and same image on firefox on my pc and it work fine.

the code is the folowing :

        var file = e.currentTarget.files[0];//  this is my image
        var reader = new FileReader();

        reader.onload = function (e) {
            var dataURL = reader.result;
            qrcode.decode(dataURL);
        }

        qrcode.callback = function (data) {
            alert(data)
        }

        reader.readAsDataURL(file);

Thanks

Hi,
if I try qr. decode("qr.png") (the qr image and the source are in the same folder), I'll receive an error message like: "Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!".

Do you know a solution for my problem or a fix for my usage?!

Thanks!

some qrcode image can't convert to text, error message is "Couldn't find enough finder patterns",
for example
http://hui51.oss-cn-beijing.aliyuncs.com/uploads/1474699758700.JPG

Chrome for Android allows getUserMedia behind a flag now. Sadly the decoder seems to struggle on any mobile devices. Testing on webqr.com with a version 1 QR code on desktop and using getUserMedia is amazingly fast. However on a chrome tablet (tested on Nexus 7 & Asus Transformer) with version 1 QR you'll get an error: "Error getVersionForNumber". Then I tested version 3 QR code as well, and it will make it past the version check and then fail on: "ReedSolomonException Bad error location". And finally on version 4 QR code you'll get this error: "Error locator degree does not match number of roots"

Any ideas why this would be happening on mobile only?

CAmcanvas is not included and I can't see my webcam is work as Webqr.com.

I managed to implement the webqr.js in my project and since web works perfectly but when I try to scan from a tablet with android 4.4 does not work. The camera d ela tablet if it reads codes with other apps but it does not do with this implementation.
Is there a manual of options or can I modify to fix this?

Lines 70-74:

for (var i = 0; i < dataBlocks.Length; i++) {
...calculate total bytes
}

The "Length" member should be "length", otherwise "totalBytes" remains zero

I'm wondering... has anyone done a typescript d.ts file for this yet? If so I'd love to get a copy before I try this out. Unless I made a mistake, I couldn't find one on definitely typed...

After quite some debugging I think I have found a problem in the JS porting of the Java code. The Java code calls "new Detector(image.getBlackMatrix())" whereas the JS code calls (effecitvley) "new Detector(qrcode.grayScaleToBitmap(qrcode.grayscale())". This difference in code seems to cause the source data of the attached image to be incorrect to begin with - thus making the decoded result incorrect.

Are you planning to port the whole ZXing library ?

I both need to read barcodes and QR codes.

Thank you very much for providing such a killer feature to HTML5 projects.
(Can't wait for Mobile devices to implement UserMedia)

I tryed to use this api loading subscripts with the mentioned order but it didn't work. So I changed it and it worked. This is the order:

bitmat.js
grid.js
QRCode.js
findpat.js
detector.js
gf256poly.js
gf256.js
rsdecoder.js
decoder.js
version.js
formatinf.js
errorlevel.js
datablock.js
bmparser.js
datamask.js
alignpat.js
databr.js

Hi,

i've coded a really easy example for testing this script and it works fine on Mac/Chrome. But i got errors on iPhone/Chrome and iPhone/Safari. Here is my example:

<input type="file" accept="image/*" capture="camera" id="jsQR">
<div id="jsDebug"></div> <!-- because i haven't a console on my iphone -->

<script type="text/javascript">
var elDebug = $('#jsDebug'), /* this is a div container for debug content */
      elQR = $('#jsQR'); /* this is my input field */
elQR.on('change', function(e) {
    var filesObj = e.target.files; /* all files*/
    var fileObj  = filesObj[0]; /* my one and only file */
    elDebug.text(qrcode.decode(window.URL.createObjectURL(fileObj)));
});

/* callback */
qrcode.callback = qrCallback;
function qrCallback(data) {
    elDebug.text(data);
}       
</script>