Git Product home page Git Product logo

ushelp / easyqrcodejs-nodejs Goto Github PK

View Code? Open in Web Editor NEW
97.0 8.0 51.0 5.13 MB

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

JavaScript 100.00%
qrcode qrcode-generator nodejs qrcodejs qrcode-node easyqrcodejs easyqrcodejs-nodejs js-qrcode javascript-qrcode nodejs-qrcode

easyqrcodejs-nodejs's Introduction

EasyQRCodeJS-NodeJS

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.

EasyQRCodeJS-NodeJS 是一个 NodeJS 环境下的服务端 JavaScript QRCode 图片(PNG/JPEG/SVG/Base64 data url)生成模块。支持点状风格,Logo,背景图片,规则色彩控制,标题等设置。支持二进制数据模式。

Table of contents

Choose what you need

Project Support
EasyQRCodeJS Running with DOM on CLIENT-SIDE . Browser(IE6+, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.), Electron, NW.js, ETC.
EasyQRCodeJS-NodeJS Running without DOM on SERVER-SIDE. Save image to file(PNG/JPEG/SVG) or get data url text. NodeJS, Electron, NW.js, ETC.
EasyQRCode-React-Native A QRCode generator for React Native. Generate QRCode image or get base64 data url text.

Feature

  • English

    • Save QRCode image file without DOM on server side

    • Support unicode character set: 😊❤️👍👨‍💻 Hello, こんにちは, こんにちは, Γεια, Привет, नमस्ते, สวัสดี, Привіт, سلام, Здравей, ສະບາຍດີ, Përshëndetje, Բարեւ, 你好

    • Support save PNG/JPEG/SVG image file

    • Support get standard base64 image data url text: data:image/png;base64, ...

    • Support get SVG data text: <svg xmlns:xlink="http://www.w3.org/1999/xlink" ...

    • Support get a stream from Canvas

    • Required Patterns that support dot style

    • Support for Quiet Zone settings

    • Support custom Position Pattern inner fill and outer border color

    • Support custom Alignment Pattern inner fill and outer border color

    • Support custom Timing Patterns vertical, horizontal color

    • Support Logo images (including transparent PNG images)

    • Support Background Image

    • Support for title, subtitle settings

    • Support binary(hex) data mode

    • Support TypeScript

  • 中文

    • 无需 DOM 的服务端 QRCode 图片保存

    • 支持 Unicode 字符集: 😊❤️👍👨‍💻 Hello, こんにちは, こんにちは, Γεια, Привет, नमस्ते, สวัสดี, Привіт, سلام, Здравей, ສະບາຍດີ, Përshëndetje, Բարեւ, 你好

    • 支持存储为 PNG 图片

    • 支持获得 Base64 编码的标准图形 URL 字符串:data:image/png;base64, ...

    • 支持获得 SVG 图形文本: <svg xmlns:xlink="http://www.w3.org/1999/xlink" ...

    • 支持从 Canvas 获得图片 Stream

    • 支持点形风格的 Required Patterns

    • 支持 Quiet Zone 设置

    • 支持自定义 Position Pattern 内填充和外边框颜色

    • 支持自定义 Alignment Pattern 内填充和外边框颜色

    • 支持自定义 Timing Patterns 垂直,水平颜色

    • 支持 Logo 图片(包括背景透明的 PNG 图片)

    • 支持 Background Image 背景图片

    • 支持标题,副标题设置

    • 二进制数据模式支持

    • TypeScript 支持

Try It!

Try It!

Demo preview

Demo preview

QR Code Structure

QR Code Structure

Installation

npm install easyqrcodejs-nodejs

Basic Usages

const QRCode = require('easyqrcodejs-nodejs');

// Options
var options = {
	text: "www.easyproject.cn/donation"
};

// New instance with options
var qrcode = new QRCode(options);

// Save QRCode image
qrcode.saveImage({
	path: 'q.png' // save path
});

QRCode API

Object

var qrcode = new QRCode(options);

Options

 var options = {
    // ====== Basic
    text: "https://github.com/ushelp/EasyQRCodeJS",
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H

    // ====== dotScale
    /*
    dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1

    dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
    dotScaleTiming_H: undefined, // For horizontal timing block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleTiming_V: undefined, // For vertical timing block, must be greater than 0, less than or equal to 1. default is 1

    dotScaleA: 1, // Dafault for alignment block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleAO: undefined, // For alignment outer block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleAI: undefined, // For alignment inner block, must be greater than 0, less than or equal to 1. default is 1
    */

    // ====== Quiet Zone
    /*
    quietZone: 0,
    quietZoneColor: "rgba(0,0,0,0)",
    */

    // ====== Logo
    /*
    logo: "../demo/logo.png", // Relative address, relative to `easy.qrcode.min.js`
    logo: "http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png", 
    logoWidth: 80, // fixed logo width. default is `width/3.5`
    logoHeight: 80, // fixed logo height. default is `heigth/3.5`
    logoMaxWidth: undefined, // Maximum logo width. if set will ignore `logoWidth` value
    logoMaxHeight: undefined, // Maximum logo height. if set will ignore `logoHeight` value
    logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
    logoBackgroundTransparent: false, // Whether use transparent image, default is false
    */

    // ====== Backgroud Image
    /*
    backgroundImage: '', // Background Image
    backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
    autoColor: false, // Automatic color adjustment(for data block)
    autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
    autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
    */

    // ====== Colorful
    // === Posotion Pattern(Eye) Color
    /*
    PO: '#e1622f', // Global Posotion Outer color. if not set, the defaut is `colorDark`
    PI: '#aa5b71', // Global Posotion Inner color. if not set, the defaut is `colorDark`
    PO_TL:'', // Posotion Outer color - Top Left 
    PI_TL:'', // Posotion Inner color - Top Left 
    PO_TR:'', // Posotion Outer color - Top Right 
    PI_TR:'', // Posotion Inner color - Top Right 
    PO_BL:'', // Posotion Outer color - Bottom Left 
    PI_BL:'', // Posotion Inner color - Bottom Left 
    */
    // === Alignment Color
    /*
    AO: '', // Alignment Outer. if not set, the defaut is `colorDark`
    AI: '', // Alignment Inner. if not set, the defaut is `colorDark`
    */
    // === Timing Pattern Color
    /*
    timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
    timing_H: '', // Horizontal timing color
    timing_V: '', // Vertical timing color
    */

    // ====== Title
    /*
    title: 'QR Title', // content 
    titleFont: "normal normal bold 18px Arial", //font. default is "bold 16px Arial"
    titleColor: "#004284", // color. default is "#000"
    titleBackgroundColor: "#fff", // background color. default is "#fff"
    titleHeight: 70, // height, including subTitle. default is 0
    titleTop: 25, // draws y coordinates. default is 30
    */

    // ====== SubTitle
    /*
    subTitle: 'QR subTitle', // content
    subTitleFont: "normal normal normal 14px Arial", // font. default is "14px Arial"
    subTitleColor: "#004284", // color. default is "4F4F4F"
    subTitleTop: 40, // draws y coordinates. default is 0
    */

    // ===== Event Handler
    /*
    onRenderingStart: undefined,
    */

    // ==== Images format
    /*
    format: 'PNG', // 'PNG', 'JPG'
    compressionLevel: 6, // ZLIB compression level (0-9). default is 6
    quality: 0.75, // An object specifying the quality (0 to 1). default is 0.75. (JPGs only) 
    */

    // ==== Versions
    /*
    version: 0, // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
    */     

    // ===== Binary(hex) data mode
    /*
    binary: false, // Whether it is binary mode, default is text mode. 
    */ 

    // =====  UTF-8 without BOM
    /*
    utf8WithoutBOM: true
    */        
}
Option Required Type Defaults Description
Basic options --- --- --- ---
text Y String '' Text
width N Number 256 Width
height N Number 256 Height
colorDark N String #000000 Dark CSS color
colorLight N String #ffffff Light CSS color
correctLevel N Enum QRCode.CorrectLevel.H QRCode.CorrectLevel.H
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.M
QRCode.CorrectLevel.L
Dot style --- --- --- ---
dotScale N Number 1.0 Dot style scale. Ranges: 0-1.0
dotScaleTiming N Number 1.0 Dot style scale for timing. Ranges: 0-1.0
dotScaleTiming_V N Number undefined Dot style scale for horizontal timing. Ranges: 0-1.0
dotScaleTiming_H N Number undefined Dot style scale for vertical timing. Ranges: 0-1.0
dotScaleA N Number 1.0 Dot style scale for alignment. Ranges: 0-1.0
dotScaleAO N Number undefined Dot style scale for alignment outer. Ranges: 0-1.0
dotScaleAI N Number undefined Dot style scale for alignment inner. Ranges: 0-1.0
Quiet Zone --- --- --- ---
quietZone N Number 0 Quiet Zone size
quietZoneColor N String rgba(0,0,0,0) Background CSS color to Quiet Zone
Logo options --- --- --- ---
logo N String undefined Logo Image Path or Base64 encoded image. If use relative address, relative to easy.qrcode.min.js
logoWidth N Number width/3.5 Fixed logo width.
logoHeight N Number height/3.5 fixed logo height.
logoMaxWidth N Number undefined Maximum logo width. if set will ignore logoWidth value.
logoMaxHeight N Number undefined Maximum logo height. if set will ignore logoHeight value.
logoBackgroundTransparent N Boolean false Whether the background transparent image(PNG) shows transparency. When true, logoBackgroundColor is invalid
logoBackgroundColor N String #ffffff Set Background CSS Color when image background transparent. Valid when logoBackgroundTransparent is false
Backgroud Image options --- --- --- ---
backgroundImage N String undefined Background Image Path or Base64 encoded image. If use relative address, relative to easy.qrcode.min.js
backgroundImageAlpha N Number 1.0 Background image transparency. Ranges: 0-1.0
autoColor N Boolean false Automatic color adjustment(for data block)
autoColorDark N String rgba(0, 0, 0, .6) Automatic color: dark CSS color
autoColorLight N String rgba(255, 255, 255, .7) Automatic color: light CSS color
Posotion Pattern Color options --- --- --- ---
PO N String undefined Global Posotion Outer CSS color. if not set, the defaut is colorDark
PI N String undefined Global Posotion Inner CSS color. if not set, the defaut is colorDark
PO_TL N String undefined Posotion Outer CSS color - Top Left
PI_TL N String undefined Posotion Inner CSS color - Top Left
PO_TR N String undefined Posotion Outer CSS color - Top Right
PI_TR N String undefined Posotion Inner CSS color - Top Right
PO_BL N String undefined Posotion Outer CSS color - Bottom Left
PI_BL N String undefined Posotion Inner CSS color - Bottom Left
Alignment Color options --- --- --- ---
AO N String undefined Alignment Outer CSS color. if not set, the defaut is colorDark
AI N String undefined Alignment Inner CSS color. if not set, the defaut is colorDark
Timing Pattern Color options --- --- --- ---
timing N String undefined Global Timing CSS color. if not set, the defaut is colorDark
timing_H N String undefined Horizontal timing CSS color
timing_V N String undefined Vertical timing CSS color
Title options --- --- --- ---
title N String ''
titleFont N String normal normal bold 16px Arial CSS Font
titleColor N String #000000 CSS color
titleBackgroundColor N String #ffffff CSS color
titleHeight N Number 0 Title Height, Include subTitle
titleTop N Number 30 draws y coordinates.
SubTitle options --- --- --- ---
subTitle N String ''
subTitleFont N String normal normal normal 14px Arial CSS Font
subTitleColor N String #4F4F4F CSS color
subTitleTop N Number 0 draws y coordinates. default is 0
Event Handler options --- --- --- ---
onRenderingStart(qrCodeOptions) N Function undefined Callback function when rendering start work. can use to hide loading state or handling.
Images format options --- --- --- ---
format N String PNG 'PNG' or 'JPG'
compressionLevel N Number 6 ZLIB compression level between 0 and 9. (PNGs only)
quality N Number 0.75 An object specifying the quality (0 to 1). (JPGs only)
Version options --- --- --- ---
version N Number 0 The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length. Information capacity and versions of QR Codes NOTE: If you set a value less than the minimum version available for text, the minimum version is automatically used.
UTF-8 options --- --- --- ---
utf8WithoutBOM N Boolean true Use UTF-8 without BOM. set to false value will use BOM in UFT-8.
Binary(hex) data model options --- --- --- ---
binary N Boolean false Whether it is binary mode, default is text mode.

Methods

  • saveImage(ImagesFormatOptions)

     //  Save PNG Images to file
     qrcode.saveImage({
     	path: 'q.png' // file path
     }).then(data=>{
        console.log("`q-premium1.png` has been Created!");
     });
  • saveSVG(ImagesFormatOptions)

     //  Save SVG to file
     qrcode.saveSVG({
     	path: 'qrcode.svg' // file path
     }).then(data=>{
        console.log("`qrcode.svg` has been Created!");
     });
  • toDataURL()

     // Get standard base64 image data url text: 'data:image/png;base64, ...'
     qrcode.toDataURL().then(data=>{
     	console.info('======QRCode PNG Base64 DataURL======')
     	console.info(data);
     });
  • toSVGText()

     // Get SVG data text: '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...'
     qrcode.toSVGText().then(data=>{
     	console.info('======QRCode SVG Data Text======')
     	console.info(data)
     });
  • toStream()

     const out = fs.createWriteStream(`qrcode-stream.png`);
     // const stream = await qrcode.toStream();
     // stream.pipe(out);
     // out.on('finish', () => console.log('Finsihed'));
    
     qrcode.toStream().then(res=>{
         res.pipe(out).on('finish', () => console.log('Finsihed'));
     })

TypeScript Support

Update to version 3.7.1+.

import QRCode = require("easyqrcodejs-nodejs")

License

MIT License

EasyQRCodeJS-NodeJS-Premium

Let you draw freely!

EasyQRCodeJS-Premium is a more powerful and comprehensive enterprise version. You can use Canvas to customize any element, such as eye frame shape, eyeball shape, QR code block shape, and more. Also supports excavation (to prevent the QRcode overlap with the logo), random block mode.

If you need more functions, we can provide you with customized development of API libraries or products. please contact me to buy the business enterprise edition.

EasyQRCodeJS-Premium 是功能更加强大和全面的商业/企业版本。让您可以在 QRCode 中通过 Canvas 自定义任何喜欢的元素,例如 Eye frame 形状, Eye ball 形状, QR Body block 形状等等。 还支持 Logo 挖取(excavation,防止二维码与 Logo 重叠)和 Random bolock mode.

如果您需要更多功能,我们可以为您提供 API 库或产品的定制开发。请联系我购买商业/企业版本。

Premium demo preview

End

Email:[email protected]

http://www.easyproject.cn

Donation/捐助:


支付宝/微信/QQ/云闪付/PayPal 扫码支付
支付宝/微信/QQ/云闪付/PayPal

我们相信,每个人的点滴贡献,都将是推动产生更多、更好免费开源产品的一大步。

感谢慷慨捐助,以支持服务器运行和鼓励更多社区成员。

We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.

Thank you donation to support the server running and encourage more community members.

easyqrcodejs-nodejs's People

Contributors

cuongbuitomosia avatar dependabot[bot] avatar kirankandel avatar ushelp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

easyqrcodejs-nodejs's Issues

SVG center logo not crisp

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?

generation qrcode with toDataUrl not working.

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

Change Font

How do you choose another font from for example some font that you find on the internet ?

toSVGText() fails to output with png logo

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?

some problems with svg after saving

Hi again,

I found some more problems after saving in svg format.

  1. 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:
    123

  2. 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:
    Screenshot_10

Thanks in advance for the help.

Get Qrcode with logo saved as svg

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.

It's not installing

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

Synchronous version of functions

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.

saveSVG() method doesn't work correctly

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:
Screenshot_4

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:
qrcode

Thanks in advance for the help.

.toDataUrl() returns "Server Responded with 403"

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

proxy ssl subdomain to http://ipaddress catch save qrcode

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

Canvas dependency is too big to deploy on Vercel

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

Vercel error

CleanShot 2023-02-09 at 21 12 45

My Serverless function

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 handler

Error Type : Unhandled Rejection (TypeError): Image is not a constructor ( todataURL)

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)
  })`

Not working in ExpressJS Server

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.

Module not found: Error: Can't resolve 'fs'

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'

Generated QR Code has black background

Hi, I have just generated my first qr code but it resulted into a black background. See screenshot.
image

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?

SubTitle overlapse for long text

any solution ? i have subtitle that present name and date time with some description and big text.
but its overlapse on result.

Screen Shot 2022-11-01 at 11 26 48 AM

why sometime result is upcE ?

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.