lazarsoft / jsqrcode Goto Github PK
View Code? Open in Web Editor NEWJavascript QRCode scanner
Home Page: http://www.webqr.com
License: Apache License 2.0
Javascript QRCode scanner
Home Page: http://www.webqr.com
License: Apache License 2.0
JavaScript QRCode reader for HTML5 enabled browser. 2011 Lazar Laszlo http://lazarsoft.info Try it online: http://webqr.com This is a port of ZXing qrcode scanner, http://code.google.com/p/zxing. Usage: Include the scripts in the following order: <script type="text/javascript" src="grid.js"></script> <script type="text/javascript" src="version.js"></script> <script type="text/javascript" src="detector.js"></script> <script type="text/javascript" src="formatinf.js"></script> <script type="text/javascript" src="errorlevel.js"></script> <script type="text/javascript" src="bitmat.js"></script> <script type="text/javascript" src="datablock.js"></script> <script type="text/javascript" src="bmparser.js"></script> <script type="text/javascript" src="datamask.js"></script> <script type="text/javascript" src="rsdecoder.js"></script> <script type="text/javascript" src="gf256poly.js"></script> <script type="text/javascript" src="gf256.js"></script> <script type="text/javascript" src="decoder.js"></script> <script type="text/javascript" src="qrcode.js"></script> <script type="text/javascript" src="findpat.js"></script> <script type="text/javascript" src="alignpat.js"></script> <script type="text/javascript" src="databr.js"></script> Set qrcode.callback to function "func(data)", where data will get the decoded information. Decode image with: qrcode.decode(url or DataURL). Decode from canvas with "qr-canvas" ID: qrcode.decode() [new from 2014.01.09] For webcam qrcode decoding (included in the test.html) you will need a browser with getUserMedia (WebRTC) capability.
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
Is there a way to change camera used to scan?
When I opened on my phone, open the front camera, instead the rear camera.
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?
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)
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
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?
It could be more simple if we know if yes or not we can use, share and modify your work.
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
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.
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.
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.
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).
Uncaught ReferenceError: qrcode is not defined
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!
I tried to import the NPM package into a Webjar, but it fails because the package has no license registered.
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
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...
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."
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.
Getting the above error for qr codes generated from zxing
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.
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.
Hey. Just wanted to let you know I made a port of this module that'll work in Node.JS
Lines 70-74:
for (var i = 0; i < dataBlocks.Length; i++) {
...calculate total bytes
}
The "Length" member should be "length", otherwise "totalBytes" remains zero
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?
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.
CAmcanvas is not included and I can't see my webcam is work as Webqr.com.
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.
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!
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.
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
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.
how can i change from front cam to rear cam?
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>
Hi, i kind of wondering how to use it. since there's no full guidance on it.
when i run test.html,it is tip error:Failed to load the image
how can i fix it?
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)
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.
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
I need to decode QRs with a webservice because the qrcode.decode() method is too slow on mobile.
Thanks for your time!
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?
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.
Hello,
I wonder if this library is maintained?
Is there an example on how to integrate it into my web app?
Thanks
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
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.