EasyQRCodeJS-NodeJS is a NodeJS server side javascript QRCode image(PNG/JPEG/SVG/Base64 data url) generator. Support setting Dot style, Logo, Background image, Colorful, Title and more. Support binary(hex) data mode.
Home Page: http://www.easyproject.cn/easyqrcodejs/tryit.html
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Hi, saveSVG() method doesn't work correctly.
Code:
`const QRCode = require("easyqrcodejs-nodejs")
// Options
var options = {
text: "www.easyproject.cn/donation",
logo: 'https://image.flaticon.com/icons/svg/32/32441.svg',
};
// New instance with options
var qrcode = new QRCode(options);
qrcode.saveSVG({
path: 'qrcode.svg' // file path
}).then(data=>{
console.log("qrcode.svg has been Created!");
});`
Result:
But if I use the saveImage() method and save in png format, then everything is fine. That is, the url of the picture is correct.
Code:
`const QRCode = require("easyqrcodejs-nodejs")
// Options
var options = {
text: "www.easyproject.cn/donation",
logo: 'https://image.flaticon.com/icons/svg/32/32441.svg',
};
// New instance with options
var qrcode = new QRCode(options);
qrcode.saveImage({
path: 'qrcode.png' // file path
}).then(data=>{
console.log("qrcode.png has been Created!");
});`
Result:
Thanks in advance for the help.
i have pointing my subdomain with certbot to my nodejs with pm2
http://101.x.x.xxx to my api.mydomain.com
i am using apache server.
// New instance with options
var EasyQRCodeOPT = new QRCode(config3);
// Save PNG Images to file
EasyQRCodeOPT.saveImage({
path: `${pathFile}${QRName}` // file path
}).then(data=>{
console.log(`${QRName} has been Created!`);
return QRName;
}).catch(error => {
console.log(`${QRName} error! : ${error}`); // here is the error
});
here is the error from pm2 logs --lines 100
Error [ERR_TLS_CERT_ALTNAME_INVALID]: Hostname/IP does not match certificate's altnames: IP: 101.xx.x.xxx is not in the cert's list:
did u have solution or tips to ignore the error ? my qrcode cant be created just cause the ssl .
FYI / by the way i work with firebase fcm where need https and its work like a charm but for the qrcode save its show an error.
when i tried with NODE_TLS_REJECT_UNAUTHORIZED: 0 the news error come with warning and error 404 on catch from saveImage
Greetings,
Is it possible to get the generated Qrcode with logo saved as svg or get a svg string ?
To clarify my use case:
I want to merge many generated Qrcodes with logos into one svg file, so then I do not need to download each one of them, and I could print all of them at once in one A4 page, instead of having to print each one alone.
For this, I need a function to give me the svg string of the generated Qrcode with logo or save it as svg file for later parse it and try to merge all of them together into one svg file. Is it possible to do with this lib ?
Thanks in advance for the help.
Hi again,
I found some more problems after saving in svg format.
When we save in svg format and then open this svg, the qrcode is not clear, there are white gaps between the black squares. As a result, it is not possible to scan the qrcode. Example:
If we open svg with chrome, then the logo is visible, but if we open svg through some editor or just load it somewhere, then the logo disappears. Example:
Thanks in advance for the help.
any solution ? i have subtitle that present name and date time with some description and big text.
but its overlapse on result.
When adding a SVG center logo, the image is not as sharp as the QR code.
Is there anyway to make it retain the quality?
let options = {
text: "something",
width: 425,
height: 425,
colorDark: "#2eb567",
colorLight: "#FFFFFF",
correctLevel: QRCode.CorrectLevel.H,
quality: 1,
// ====== Quiet Zone
quietZone: 10,
quietZoneColor: "#FFFFFF",
logo: logoUrl, //public logo url
logoBackgroundColor: '#FFFFFF'
};
// New instance with options
let qrcode = new QRCode(options);
let base64QrData: any = '';
try {
await qrcode.toDataURL().then((data: any) => {
base64QrData = data;
});
} catch (err: any) {
console.log("Error while creating qr code", err);
}
I'm getting following error in console:
Error while creating qr code "Server responded with 403"
" at /home/node/app/node_modules/simple-get/index.js:89:7",
" at /home/node/app/node_modules/canvas/lib/image.js:56:28",
this is only happening in production, i'm not able to reproduce it
When installing node-js version I get this error.
Error: Cannot find module 'canvas'
I supposed node-js version should not rely on canvas.
Hi, I have just generated my first qr code but it resulted into a black background. See screenshot.
And here is my configuration.
var data = {
"text": "This is the content",
"correctLevel": 0,
"PO": "#e1622f",
"backgroundImageAlpha":0,
"logo":"https://...4965-8538-243d3956946f.png",
"AI":"#ffffff",
"AO":"#ffffff",
"timing":"#e1622f"
}Then I call this.
const qrcode = new QRCode(data);
const result = await qrcode.toDataURL();How can I remove the black background?
I'm trying to use it in Angular 8.
I added following in the component.ts file
const qr = require('easyqrcodejs-nodejs');
But it is giving error
ERROR in ./node_modules/easyqrcodejs-nodejs/index.min.js
Module not found: Error: Can't resolve 'fs' in '/home/scanova/code/scanova/qcg-frontend/node_modules/easyqrcodejs-nodejs'
Hello,
I am getting this error everytime i am trying to generate qrcode using toDataUrl() method.
The following is the error I am getting:
Cannot set properties of undefined (setting 'width')","name":"TypeError","stack":"TypeError: Cannot set properties of undefined (setting 'width')\n at Drawing.draw
I would like your help. Thanks
Hi, when we use TypeScript Support there are no saveSVG () and toSVGText () methods.
I want to save the Url of the QRCode but it don't work correctly ? It's very urgent . Can anyone help me ?
`codeobj = new QRCode({
text: "link",
colorLight: 'transparent',
width: 150,
height: 150,
quietZone: 10,
quietZoneColor: 'transparent',
})
.toDataURL()
.then((data) => {
console.info('======QRCode PNG Base64 DataURL======')
console.info(data)
})`
Having an issue with toSVGText() not outputting with the logo:
`import QRCode from 'easyqrcodejs-nodejs';
var options = {
text: 'http://www.example.com/test',
width: 315,
height: 315,
colorDark: '#000000',
colorLight: '#FFFFFF',
dotScale: 1,
PO: '#000000',
PI: '#000000',
AO: '#000000',
AI: '#000000',
logo: 'https://www.example.com/img/logo.png',
logoWidth: 59,
logoHeight: 59
}
var qrcode = new QRCode(options);
//Image Logo visible in result image data
var dataURL = await qrcode.toDataURL();
//Image Logo not visible in result svg object
var dataSVG = await qrcode.toSVGText();`
In this example dataURL is a perfect image with qr code and logo, but dataSVG is a perfect qr code, but the space where the logo image should be it is just blank... any idea why this might be happening?
It could be nice if dots can be turn to circles
As you can see from the screenshot, canvas alone is taking up more than 90% of the allowed size of Vercel's serverless functions. Would suggest moving to something more lightweight like: https://www.npmjs.com/package/@napi-rs/canvas
import { NextApiRequest, NextApiResponse } from 'next'
import nextConnect from 'next-connect'
import QRCode from 'easyqrcodejs-nodejs'
const handler = nextConnect().get(async (req: NextApiRequest, res: NextApiResponse) => {
const options = {
width: 400,
height: 400,
text: 'https://example.com',
dotScale: 0.9,
}
const qrcode = new QRCode(options)
const base64Data = (await qrcode.toDataURL()).replace('data:image/png;base64,', '')
const img = Buffer.from(base64Data, 'base64')
res.setHeader('Content-Type', 'image/png')
res.setHeader('Content-Length', img.length)
res.send(img)
})
export default handlerHow do you choose another font from for example some font that you find on the internet ?
Hi,
Is it possible to have synchronous versions of the functions generating qrcodes (eg: toDataURL(), .toSVGText(), .saveImage() ) in some cases its worth wating and easier to not have to handle a promise.
Thanks.
Hello, thanks for the work put into this awesome library.
However, I just wanted to confirm if this truly works on an expressjs app. Because, I tried your samples in my express app and the generated code isn't readable by any qr code scanner.
Here is what I tried:
let options = {
text: "sample_data",
width: 320,
height: 320,
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
dotScale: 0.4,
colorDark: "#473C8B",
colorLight: "#FFFACD",
quietZone: 15,
quietZoneColor: '#00CED1',
PI: '#BF3030',
PO: '#269926',
PI_TL: '#b7d28d',
PO_TL: '#aa5b71',
AI: '#009ACD',
AO: '#B03060',
timing_H: '#ff6600',
timing_V: '#cc0033',
logo: "public/icons/logo.png",
logoBackgroundColor: '#FFF8DC',
logoBackgroundTransparent: false
};
let qrcode = new QRCode(options);
qrcode.saveImage({
path: 'code.png'
});
return "";
The QR code was generated fine, but I can't seem to read it with any qr code scanner. It's really weird.
Help would be really appreciated.
My QRCode result
QR 1 = BarcodeFormat.upcE
QR 2 = BarcodeFormat.qrcode
can anyone tell me why sometime the result its not QRCode ?
what i save is aes-256-cbc encryption text
what i encrypt is uuid from "uuidv4": "^6.2.12", date time , and 3 other value / secret (short data)
i know the result its different when i tried to scanning from qr_code_scanner: ^0.5.2 flutter dependency https://pub.dev
so 1 of 10 qrcode have broken and cant to scanning because its not QRCode but its upcE.
when i scanning 1 of data:
[log] qrcode format : BarcodeFormat.upcE
[log] qrcode data : 13417680 // its not my encryption text (aes-256-cbc) // unexpected
other data its valid 9 of 10 data
[log] qrcode format : BarcodeFormat.qrcode
I/flutter (12777): qrcode data decryption : *******secret*****
[log] qrcode data : hILYH7JI/3Bch8f8x6NN6EyksfL/Kho8swerYC4c6gk08R01N+behSEO0F2IcucBhq9c5cll7ex23cGrqaKn3h3Iw5RsPeNhlVddSnKZ6WsLiHS62ZBWsx06oeRqlzXJBnYI0B8GWm20K7uvpTduGQ3vCVWgeSjXkvGV+G9QQLibKMIGD/mhHBWHx3jrlsGI
It won't install on node v18.16.0. I haven't tested on any other version yet, though.
Here is the log
> npm i easyqrcodejs-nodejs
npm ERR! code 1
npm ERR! path /Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/Users/siis/.nvm/versions/node/v18.16.0/bin/node /Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.11.4 found at "/usr/local/opt/[email protected]/bin/python3.11"
npm ERR! gyp info spawn /usr/local/opt/[email protected]/bin/python3.11
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/siis/Library/Caches/node-gyp/18.16.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/siis/Library/Caches/node-gyp/18.16.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/siis/Library/Caches/node-gyp/18.16.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 23.1.0
npm ERR! gyp ERR! command "/Users/siis/.nvm/versions/node/v18.16.0/bin/node" "/Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas
npm ERR! gyp ERR! node -v v18.16.0
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/siis/.nvm/versions/node/v18.16.0/bin/node /Users/siis/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/siis/Documents/Projects/rndapp/frontend/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1091:16)
npm ERR! node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.1.0
npm ERR! node-pre-gyp ERR! command "/Users/siis/.nvm/versions/node/v18.16.0/bin/node" "/Users/siis/Documents/Projects/rndapp/frontend/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/siis/Documents/Projects/rndapp/frontend/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.16.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/siis/.npm/_logs/2023-11-17T17_38_25_035Z-debug-0.log
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.