如下图：
图一是没有加logo，whiteMargin为40的正常情况，四周各20的外边距；图二是加了logo后生成的码，whiteMargin全部作用到了下边距和右边距，码出现了偏移。

'awesomeQR' is not a constrctor

When generating a code with just a background, the margins are evenly spaced around the edges. If I then add a logo, the margin only appears on the right hand side and not on the top, bottom, or left.

Is it possible to specify the value of QR code version? In some cases, users may want to have multiple different QR codes but with the same version for regularity.

有可能指定QR碼的版本值嗎？有些場合使用者可能會想要多份不同的QR碼，但為了整齊而版本一致。

Error: code length overflow. (1620>1056)
    at Function.QRCodeModel.createData (awesome-qr.js:286)
    at QRCodeModel.makeImpl (awesome-qr.js:120)
    at QRCodeModel.getBestMaskPattern (awesome-qr.js:139)
    at QRCodeModel.make (awesome-qr.js:100)
    at AwesomeQRCode.makeCode (awesome-qr.js:1203)
    at AwesomeQRCode.create (awesome-qr.js:1196)
    at HTMLButtonElement.<anonymous> (index.html:235)
    at HTMLButtonElement.dispatch (jquery-3.1.0.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.1.0.min.js:3)

Is there any solution?

谢谢这个repo！:+1:

联图的二维码美化非常漂亮，可否通过设置参数的方式实现类似的效果？
http://www.liantu.com/meihua/

#12 见这里有讨论过美化，不知作者是否有兴趣。

It would be really nice to have an npm package that does not rely on gyp (python+c compiler).

This would solve many installation problems where the correct python or C-compiler version is not available.

Hi, I'm using Awesome-qr.js on Vue (using vue-qr). I opened an issue on that repo but it seems that the problem is on Awesome-qr.js. After an update I'm not able to scan the generated QR code anymore.

The problem is the change of the alignment marking (the little square at bottom-right):

This is what is generated with the latest version. It's dotted and many scanning apps don't read it.
I tried to fill the space between the dots and it's possible to scan it again, so the problem is this one.

The issue seems to be the default value of the dotScale option (i see that is deprecated in this library so I'm not sure if it's still wrongly used). The default is 0.4, but if the value is changed to 1 (on vue-qr 1 is the default value), everything is scaled to 1 except from the alignment marking.

Generated codes work just fine when scanned on my iPhone, but when scanned on Android or https://webqr.com/ they come up as invalid. I tried playing with the size, color correction, components prop but nothing fixes it.. Any idea why this is happening?

Could you publish the latest version to npm? The current npm build is broken, as described in #28. For those of use wanting to install as a dependency through npm, not use require.js, could you publish the patch mentioned in #28 to npm?

Laravel 下纯html中使用好像require.js 加载model 会出处

i like your project
i want to add the same as your legandry work in this https://www.bitcat.cc/webapp/awesome-qr/index.html

to my website ,
i am developing in asp.net C#
kindly can you send the html page
note: your email is not working

另外有个 logoImg 未定义

是不能在webpack 中打包么。报这样的错误，，抱歉我 webpack用的不是很好，我用事 vue-cli 安装的。
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/canvas/lib/bindings.js 3:17-56
@ ./node_modules/canvas/lib/canvas.js
@ ./node_modules/awesome-qr/awesome-qr-node.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/my/components/Info.vue
@ ./src/pages/my/components/Info.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/my/My.vue
@ ./src/pages/my/My.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
errors @ index.js?bed3:167
onmessage @ socket.js?57b2:41
EventTarget.dispatchEvent @ sockjs.js?3600:170
(anonymous) @ sockjs.js?3600:883
SockJS._transportMessage @ sockjs.js?3600:881
EventEmitter.emit @ sockjs.js?3600:86
WebSocketTransport.ws.onmessage @ sockjs.js?3600:2957

这是我 webpack 引入的 module
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},

A really handy thing to evaluate new libraries is to have a quick glance over a Codesandbox to see the library implementation API etc. I think this would be very useful for people, and I would be happy to raise a PR!

Win 10
node v8.9.3

提示python node-gyp blablabla，装了node-gyp之后报错又变了

I love your script a lot, I've tried it on https://www.bitcat.cc/webapp/awesome-qr/index.html and it works very well.

I've noticed that one I keep getting a lot of errors 'awesomeQR' and more (awesomeQRCode doesnt work either even after importing the gif.js and require.js).

The script you have on bitcat works but is using a totally different awesome-qr.js than what is on github /dist/awesome-qr.js ?

url to awesome-qr.js used by bitcat: https://www.bitcat.cc/webapp/awesome-qr/awesome-qr.js

Please could we get some kind of sample script that shows the code working? This would be incredible and make my life easier?

Thank you so much <3

Is there a valid reason why this package includes gifs and pngs when installed from NPM? They weigh in at 16 megabytes, and I doubt downstream codebases are likely to use them.

ant$ du -h node_modules/awesome-qr
4.0K	node_modules/awesome-qr/test
 48K	node_modules/awesome-qr/dist
 16M	node_modules/awesome-qr/art
 76K	node_modules/awesome-qr/lib/gif.js
 24K	node_modules/awesome-qr/lib/gifuct-js
192K	node_modules/awesome-qr/lib
 48K	node_modules/awesome-qr/src/gif.js
 12K	node_modules/awesome-qr/src/gifuct-js
128K	node_modules/awesome-qr/src
 16M	node_modules/awesome-qr

Please could we add a .npmignore file that prevents these images (and any other source code that isn't required to use the library) from being published?

I'd be happy to submit a patch for this, if you're open to the idea.

码点设置：
1.默认是正方形点
2.建议增加“圆形” 点 canvas.arc(x+(w/2),y+(h/2),w/2,0,2*Math.PI)
3.建议增加“菱形”点，可以更自由设置点

码眼:
既然要与众不同，那码眼也可以设置，目前思路是用图片定位覆盖。

install fail

Is it possible to change the package dependency from "canvas" to "canvas-prebuilt"?

I am trying to build a project on Google Cloud Functions but I get an error because the "canvas" package is not set for this environment. In order to work, the dependency needs to be set to this package: "canvas-prebuilt" (https://www.npmjs.com/package/canvas-prebuilt)

Description

I know this isnt't a awesome-qr.js specific error, but it could be useful to add it in the documentation.

Error

When using the code in the browser, I get the following error

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

This is du to the cross-origin use of images and canvas https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

如图,大概就是说data(){} 少了冒号
这个是在vuecli下用的,结果编译后,chrome正常就IE导致 整个页面打不开

In order to get it working needs to create also HTML element with specific id. That wasn't mentioned in docs and I was getting error till I made it randomly trying different things.

请教下，这个library能否在微信小程序中正常使用？

Had a quick look at the demo and I can see a base64 image coming back in chrome dev tools but the UI isn't updated when you click the generate button.

Out of interest, is it injecting a canvas ? or just an img?

Do you know if this is compatible with old/new browsers?

Thanks in advance.

Great start!

npm安装一直不成功，所以用的cnpm安装，是能安装成功，但一运行就报错，can't resolve ‘awesome-qr’，引用方式是import，v1.0.9是没问题的

Is there any plan to support logoImage in node server-side qr generation?

I'm a node developer and I really like this project, so if there's anything I can do to help/support, I can see what I can do.

I'm trying to set this generator up on node, but it fails with the error:

TypeError: Image or Canvas expected

at line 1493 of awesome-qr-node.js: context.drawImage(imgEl, 0, 0);

I have this set up in my server like this:

        const AwesomeQR = require('awesome-qr');
        const {Image} = require('canvas');

        const backgroundImage = new Image();
        backgroundImage.src = path.resolve(__dirname, '../src/assets/logos/akkadu-logo-outer-solid-100.png');
        console.log('---->', backgroundImage); // returns [Image:100x101 /Users/terminallychill/Sites/Akkadu/Akkadu_Cloud_Presentation/src/assets/logos/akkadu-logo-outer-solid-100.png complete]

        const image = {};

        new AwesomeQR().create({
          text: 'https://www.google.com',
          size: 250,
          backgroundImage,
          // autoColor: true,
          callback: (data) => {
            if (!data) {
              console.log('failed to generate the QR code');
            } else {
              image.data = data;
              // play with binary PNG data
            }
          },
        });

Without the backgroundImage, the qr code generates just fine, so I'm wondering if there is a problem/workound with the canvas module?

plz reply and help

如题，求帮助

Hello,

Thank you for your code - excellent project!

Are there any plans to also offer your code to render images server side with nodejs?

I'd rather create them on the server and pass them to the web page instead of having the client generate them.

Thanks for this awesome project. I would like to use it on front-end browser side with

Unfortunately I got "Uncaught Error: Mismatched anonymous define() module" in File require.js. This error issued while I only include the script, without any further javascript code.

I've both installed awesome-qr with

1. npm install, and then copy out the /dist
2. directly download from GitHub

It definitely is my misunderstanding of the usage of this package. It is possible to give me a clue to solve my problem?

理论上只要二维码纠错率足够高,中间加个 logo 还是能识别出来的,我自己也试验过,生成的二维码在中间 p 上 logo还是能正常识别的,希望能加入中间 logo 的功能

Do you have plan to build a version for ReactJS?Really waiting for this.
Thanks

Hi, i am having this error "An invalid gif has been selected as the background." i have tried few simple gif images but the problem remains, could you please help.

https://github.com/js-org/dns.js.org

Hi,
Could you please add the pointShape parameter to the list of options like it is available in the source library here: https://github.com/EFPrefix/EFQRCode/blob/main/Source/EFPointShape.swift?
Thanks in advance.

how to assign PNG image created from create function to global variable?

i want to use the image inside canvas. and not binding to html element

Using the example set out in the READ.me gives me the following error in Chrome browser:

Uncaught TypeError: AwesomeQR is not a constructor
at FileReader.reader.onload (jsqr.html:23)

What am I doing wrong?

I also had to add (dataURL) => '') instead of (dataURL) =>) to have the page load simply to test.

HTML Code is:

<script src="dist/awesome-qr.js"></script>
<body>
  <input type="file" onchange="previewFile()"><br>
  <img  src="" height="200" alt="Image preview...">
<script>

var background;

const preview = document.querySelector('img');
var reader = new FileReader();

reader.onload = function () {
  preview.src = this.result;
  background = this.result;

  new AwesomeQR({
    text: "AwesomeQR by Makito - Awesome, right now.",
    size: 500,
    backgroundImage: background,
  }).draw().then((dataURL) => );
};

function previewFile() {
  const file = document.querySelector('input[type=file]').files[0];

  if (file) {
    reader.readAsDataURL(file);
  }
}


</script>
</body>

Hello!

I need help I want to change the text type to URL so that the code leads to a website.

Thanks

能不能支持 umd 格式引入

在text的内容url地址而且长度过长的时候会出现标题中的错误信息，请问有办法解决此列问题吗

Hi,

I receive the following error when i deploy my app over on Google App Engine.

File upload done.
Updating service [default]...failed.
ERROR: (gcloud.app.deploy) Error Response: [9] Cloud build a1e852b8-5255-4b84-88d6-d36a9eb17fd9 status: FAILURE
Error ID: beaf8772
Error type: UNKNOWN
Error message: npm ERR! Invalid Version: git+ssh://[email protected]/Automattic/node-canvas.git#6fae569fc5e2ca2d5d81c9d15a0fe49bfb993b51