ushelp / easyqrcodejs Goto Github PK

a=new QRCode($0, {text:'https://www.freedesktop.org/software/systemd/man/systemd.service.html', 'height':20, 'width':20});

$0 refers to the highlighted element in Developer Tool.

The code does not generate a visible QR code. It does generate a canvas element with width and height 0.

I believe EasyQRCodeJS fails to generate because the size is too small and the text is too long.

Is there a way I can tell that if the generation is successful?

When dynamically setting the background image or logo of the QRCode and using the below code to download the resulting image, no background or logo is saved in the image.

`
$('#qrcode').attr('crossOrigin', 'anonymous');

$('#qrcode').attr('href', document.querySelector('canvas').toDataURL('image/png'));

$('#qrcode').attr('download', 'testdownload');
`

When using option.backgroundImage the downloaded image is blank, when using options.logo the downloaded image does not contain the logo.

Using Chrome or Firefox the "Right Click save as" will download the correct image, this does not work on Safari.

I need to set the background transparent so it can fit on top of any background automatically.

• Feature Request

Can I change the data pattern or eye pattern to different styles?

It will be helpful if data pattern and eye pattern can be changed by passing the svg code of the pattern.

Also, can I extract the pattern info of the QR code so that it could be regenerated simple by passing the pattern?

If the code requests the logo image from cache, it fails from a lack of CORS headers.

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

(fails)

(succeeds)

Could this be caused from the recent change that uses the cached version of the image?

I have found a couple of feature missing in library documentation:

1. How we can add a frame to QRcode?
2. How we can add text at bottom of QR code?
3. How we can round the Logo image?

Thanks

scanned result does not match text ( aka, qrcode is not correct. )

require(["easy.qrcode.js"], function(QRCode){
var options = {
text: "https://chinese.gordondata.com.au/index.html?Article=九月九日忆山东兄弟（盛唐·王维）&HZField=Simplified&PYField=PinYin",
correctLevel : QRCode.CorrectLevel.H,
}
new QRCode(document.getElementById("output"), options);
});

Error : Cannot read property 'resize' of undefined
`
var options_object = {
text: props.location.state.link,
colorLight: 'transparent',
width: 150,
height: 150,
quietZone: 10,
quietZoneColor: 'transparent',
logo: onevcardlogo,
logoWidth: 40, // width. default is automatic width
logoHeight: 40,
}

var codeobj = new EasyQRCode(qrcode.current, options_object)

codeobj.resize(80, 80)
`

File: https://github.com/ushelp/EasyQRCodeJS/blob/master/src/easy.qrcode.js
Line: 1875
Code: for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {

Problem: The variable 'i' increments to be equal to 'len' in the case where too much data is being stored in the QR code. This causes an out of bound error in the for loop.

Solution: Modify the for loop to for (var i = 0, len = QRCodeLimitLength.length; i < len; i++) { by removing the '=' character.
This allows the throw new Error("Too long data"); logic to execute.

如题，如图
官方给到的demo图，title、subtitle都在二维码外面（顶部）显示，但是实际开发中和官方给到的try it demo，标题和副标题都被画在了二维码里面了

It would be nice if the QRCode had a resize function. Currently I must recreate it everytime the page is resized!
Additionally what is the difference between clear and remove?
Very cool and easy to use library! Thanks!

When I give "\x00\x00\x01\x01\x65\xba\xcb\x59" as input I would expect it to generate a QR code which outputs 0000010165bacb59 as Binary(HEX) (on a reader that supports binary qr codes. e.g. QRefine on iOs).

Got: EFBBBF0000010165C2BAC38B59

Changing line 74 to: this.parsedData.push(code) seems to fix it so I assume it is related to the utf-8 transforms.

Is there a way to customise the Position indicators to display with rounded corners, dotted or solid border and internal marker being a circle,star,square etc?

I am trying to use this repo to generate a QR code and then save it into a file by the Node, but I am not sure how to do it? it seems like I should provide a DOM_object as the first argument, so could you please give some idea, thanks!

Is this just me?

Imported easy.qrcode.min.js to my project, everything is working fine without logo but after adding logo base64 data or even logo pass it gives uncaught systax Errror ?!!

var options_object = {
			// ====== Basic
			text: data.profile[0].Email,
			width: 300,
			height: 300,
			colorDark : "#000000",
			colorLight : "#ffffff",
			correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
			dotScale: 1 // Must be greater than 0, less than or equal to 1. default is 1
			logo:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg"
		 }
		new QRCode(document.getElementById("qrcode"), options_object)
```;`

try to export canvas todataURL() or make a download link

current domain was localhost:8080

image was http://diui35v2plbz7.cloudfront.net/imagetargets/20190815185046.jpg

even though i put allow cross origin on s3 bucket stil its showing

如题

Using the example code, I'm getting an exception thrown

I setup a project to test all the options available in EasyQRCodeJS and I ran into a few issues. The options are named correctly, and set using valid parameters however they have no effect on the generated QR code.

Options

• PO(string)
• PI(string
• timing(string)
• titleTop(number)
• subTitleTop(number)

PO, PI, and timing should globally set the color of their respective elements, they don't. You can still set the colors using PO_TL, PO_TR, PO_BL, PI_TL, PI_TR, PI_BL, timing_H, and timing_V.

titleTop and subTitleTop should set the position of their respective elements, they don't. There is no other way to set the position of these title elements

Everything else is working great I really appreciate this project. Thank you for your hard work!

Here I leave my implementation with React Hooks in a NextJS page.
It needs useEffect that checks when the REF.current isn't null.

• I kept the import of .min.js as the docs shows for React, but it worked without it.

import { useState, useRef, useEffect } from "react";
import Head from "next/head";
import * as QRCode from "easyqrcodejs";

const SomePage = (props) => {
  const qrcodeDOM = useRef(null);
  const [qrcode, setQrcode] = useState(null);

  const generateQR = (color) => {
    if (qrcode) {
      setQrcode(null);
    }
    var options = {
      text: "https://github.com/ushelp/EasyQRCodeJS",
      colorDark: color ? color : "#000000",
    };
    setQrcode(new QRCode(qrcodeDOM.current, options));
  };

  useEffect(() => {
    if (qrcodeDOM.current) {
      generateQR();
    }
  }, [qrcodeDOM.current]);

  return (
    <div>
      <div ref={qrcodeDOM}></div>
      <Head>
        <script
          type="text/javascript"
          src="/public/static/js/easy.qrcode.min.js"></script>
      </Head>
    </div>
  );
};

export default SomePage;

i have no Logo.
quietZoneColor not working.
Same bug with: https://www.easyproject.cn/easyqrcodejs/tryit.html

Ever since I updated to 4.3.1 I get a console log from the package every time a QR-code is generated. Not a huge problem, just annoying. Example: rgba(0, 0, 0, 0) easy.qrcode.min.js:21:6401

When using canvas / image, we need to crossorigin = "anonymous" attribute.
Why did you comment it out?
Can't use it?
I need the dataURI specified in the generated canvas.

• Feature Request

Is there support for TypeScript to use in Angular 6+?

i have set logo from png transparent, but after render, image have background and not transparent

I tried to generate a code with сyrillic and it is generated incorrectly. What am I doing wrong?

Would be nice to have an option/property to set the z-index of the title, subtitle, logo, quietzone as to control their layering based on ones needs (and I think the background color of the title isn't working)

Please add an option to disable the data url logging.

How to make everything change except the eyes?

In trying to add a logo to the QR code, any image added as a logo causes this error:

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Here's the code:

var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 200,
height: 200,
colorDark: "#282d36",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L, 
dotScale: 1,

logo: "any_image_path.png", 
logoWidth:100,
logoHeight: 100,
logoBackgroundTransparent:false
});

I've tried a number of things and seen no success.

Greetings!

As i use the library, i found something in logs, showing base64 link of qr, and that is what i absolutely need.

Is it possible to have a function returning base64 link of qr?

Hello. I am using the latest implementation of the library (4.0.0).
The library is great and everything works, except that it does not work on Android native cameras, nor standard QR apps like "QR Code Barcode Scanner" on google play. The QR-Code is generated correctly because I downloaded it and ran it through a qr image file scanner, it scans great. But I am not able to figure out why android scanners do not work.

Here is an example of the code I am using, it's the standard implementation so I don't think I am screwing up here.

var options = {};
options["text"] = "TEST";

var qrcode = new QRCode(options);
  qrcode.toDataURL().then(data => {
    const im = data.split(",")[1];

    const img = Buffer.from(im, 'base64');

    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': img.length
    });
    return res.end(img);
  });

Depends on text passed to new QRCode every time I'm get different size of resulting image.
for example I set width and height 256, but image has size 250 or even 261.
Is it possible to get exact size of resulting image as I requested?

Nextjs is a ssr framework but this lib tries to access DOM in the server-side.

Is there a way to make the SVG output smaller by generating a single element and calculating the lines that way, instead of hundreds of ? I have seen other QR code libraries do this.

I just added easyqrcodejs to my TypeScript project, but I'm getting an error that the types can't be found when I try to import the module.

Code:

import * as QRCode from "easyqrcodejs";

Error:

Could not find a declaration file for module 'easyqrcodejs'. '/node_modules/easyqrcodejs/dist/easy.qrcode.min.js' implicitly has an 'any' type.
  Try `npm install @types/easyqrcodejs` if it exists or add a new declaration (.d.ts) file containing `declare module 'easyqrcodejs';

I tried doing the recommend install from the error, but there's no repo with that name.

I use this config
{
width: 240,
height: 240,
colorDark: "#982844",

        PO: '#982844',
        PI: '#982844',

        correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H

         backgroundImage: 'logo1.png',
        // backgroundImage: 'data:image/png;
        backgroundImageAlpha: 0.3,
        autoColor: true,



        dotScale: 0.5

}

but dots doesn't change into color "#982844"

I tried this in my react project and this error apears.
The error appears when i put the div in a modal.

Here is my setup:

And for some reason it still shows a white background:

Greetings!

This could be a great feature if this will be added. :D

I have a 3600x3600 logo that I am trying to incorporate into a QR. For some reason it seems that whenever I try generating a QR with this HD logo on my mobile device (Galaxy S10e) it's blurrier than its Windows 10 PC counterpart. The QR itself seems blurrier too. I can only guess that high DPI displays have not been accounted for in the library? I've read that there are issues with HTML5 canvas and higher DPI displays. My laptop is a Lenovo Thinkpad x230 with a 1366x768 display, much lower res than my 2019 phone.

Any thoughts on this?

I use the newest Angular with this, and it works fine, the only issue is that the new Ivy Compiler does not like CommonJS modules, and prefers ES modules for proper optimization.

在Vue中使用，在改变二维码大小时无法正确响应，并且响应时长较长，且较小的时候有出现模糊的状态

The Position Pattern / Finder Pattern also gets scaled when using Vue... This makes it unreadable to scanners...

Is it possible to remove the tooltip of QR? Whenever i hover the QR, it shows up, which i dont need it to.

I want to set logo with crossOrigin.

Thank you!

Thank developer!

将EasyQRCodeJS 放置CDN, 会出现这样的情况

Just question... I think it would be awesome to have have the title + description, or add somehow a section above or bellow the qrcode with html. This way the devs would be able to fully customise the qrcode.