cssivision / qrcode-react

a react component to generate QRCode with logo

qrcode-react

A React component to generate QRCode with logo. Inspired by zpao/qrcode.react, also support chinese.

Installation

npm install qrcode-react

Usage

var React = require('react');
var ReactDOM = require('react-dom');
var QRCode = require('qrcode-react');

ReactDOM.render(
  <QRCode value="http://facebook.github.io/react/" />,
  mountNode
);

Available Props

prop	type	default value
value	string	http://facebook.github.io/react/
size	number	128
bgColor	string (CSS color)	"#FFFFFF"
fgColor	string (CSS color)	"#000000"
logo	string (URL / PATH)
logoWidth	number	size * 0.2
logoHeight	number	Proportional scaling to logoWidth

qrcode-react's Issues

This component, Babel compilation fails.

hello,
I use this component,but found this component Babel compilation fails. it don't work.but i don't kown why

Copyright assignment is somewhat innaccurate

This is a little pedantic, and for that I apologize, but the copyright assignment in the "LICENSE" file is inaccurate. The copyright assignment in the LICENSE file reads;

Copyright 2017-present, cssivision

But it should be "Copyright (c) 2017 cssivision".

• The (c) or ©️ symbol needs to be there.
• The year should be a single year. Copyright lasts 70 from the death of the author, at least in the US.
• Ideally you'd have the name of the author, or, if a corporation owns the copyright, the form of corporation. (Inc, Spc, AB, Oy, etc.)

我生成了二维码，该怎么下载和打印呢？

url后面带参数的情况会失效，可以处理下吗？

如

// 正常例子
var React = require('react');
var QRCode = require('qrcode.react');
 
React.render(
  <QRCode value="http://facebook.github.io/react" />,
  mountNode
)

// 失效例子
var React = require('react');
var QRCode = require('qrcode.react');
 
React.render(
  <QRCode value="http://facebook.github.io/react?id=123" />,
  mountNode
)

对于后面带参数的情况可以处理下吗？目前是失效的

Licence

Please consider adding a LICENCE file, such as the MIT licence also used by qr.js

Thanks for creating this module!

React.PropTypes no longer exists in React 16

https://github.com/cssivision/qrcode-react/blob/master/lib/index.js#L31

This breaks the build in React 16. Need to use:

import PropTypes from 'prop-types';

React 15

var getDOMNode;
if (/^0\.14/.test(React.version)) {
  getDOMNode = function(ref) {
    return ref;
  }
} else {
  getDOMNode = function(red) {
    return ref.getDOMNode();
  }

createClass will be deprecated in react v16

Just an FYI, more an annoying warning than anything:

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

Error with UglifyJs

when I use webpack + UglifyJs to build. something error

ERROR in js/main-2a80142.js from UglifyJs
Unexpected token: name (QRCode) [js/main-2a80142.js:92156,6]

log

PS C:\custom> npm run build

[email protected] build C:\custom
webpack --progress --profile --colors --config webpack.pro.config.js

clean-webpack-plugin: C:\custom\public\pro has been removed.
10329ms building modules
20ms sealing
1ms optimizing
0ms basic module optimization
15ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
1ms chunk optimization
6ms advanced chunk optimization
89ms building modules
21ms module and chunk tree optimization
1ms chunk modules optimization
0ms advanced chunk modules optimization
13ms module reviving
2ms module order optimization
11ms module id optimization
0ms chunk reviving
1ms chunk order optimization
19ms chunk id optimization
59ms hashing
1ms module assets processing
307ms chunk assets processing
2ms additional chunk assets processing
1ms recording
1138ms additional asset processing
1ms chunk asset optimization
334ms asset optimization
58ms emitting
Hash: 2a80142447f415564ba2
Version: webpack 3.6.0
Time: 12528ms
                                        Asset       Size  Chunks                    Chunk Names
      imagessrc/images/control/handle_del.png    3.21 kB          [emitted]
                      imagessrc/images/0.jpeg    94.3 kB          [emitted]
                      imagessrc/images/1.jpeg    54.8 kB          [emitted]
                      imagessrc/images/2.jpeg    59.1 kB          [emitted]
                      imagessrc/images/3.jpeg      36 kB          [emitted]
           imagessrc/images/control/clear.png    6.44 kB          [emitted]
              imagessrc/images/material/a.jpg    84.3 kB          [emitted]
           imagessrc/images/control/order.png     5.8 kB          [emitted]
                  imagessrc/images/upload.png    4.62 kB          [emitted]
   imagessrc/images/control/handle_rotate.png    3.59 kB          [emitted]
     imagessrc/images/control/handle_zoom.png    2.67 kB          [emitted]
   imagessrc/images/control/handle_change.png    17.7 kB          [emitted]
                           js/main-2a80142.js    2.86 MB       0  [emitted]  [big]  main
css/main.c1215285413f6483d42f9aae01fc3e97.css       1 kB       0  [emitted]         main
                                   index.html  702 bytes          [emitted]
                         assets/ruler.min.css    1.65 kB          [emitted]
                          assets/ruler.min.js    9.56 kB          [emitted]
  [29] (webpack)/buildin/global.js 509 bytes {0} [built]
       [] -> factory:0ms building:3ms = 3ms
 [347] ./src/images/0.jpeg 69 bytes {0} [built]
       [] -> factory:3307ms building:96ms = 3403ms
 [361] ./src/index.js + 45 modules 162 kB {0} [built]
 [459] ./src/style.css 133 bytes {0} [built]
       [] -> factory:609ms building:16ms = 625ms
 [737] ./src/images/1.jpeg 69 bytes {0} [built]
       [] -> factory:947ms building:43ms = 990ms
 [738] ./src/images/2.jpeg 69 bytes {0} [built]
       [] -> factory:946ms building:41ms = 987ms
 [739] ./src/images/3.jpeg 69 bytes {0} [built]
       [] -> factory:946ms building:40ms = 986ms
 [752] ./src/images/control/clear.png 80 bytes {0} [built]
       [] -> factory:3728ms building:104ms = 3832ms
 [753] ./src/images/material/a.jpg 77 bytes {0} [built]
       [] -> factory:776ms building:48ms = 824ms
 [757] ./src/images/control/order.png 80 bytes {0} [built]
       [] -> factory:458ms building:43ms = 501ms
 [758] ./src/images/control/handle_del.png 85 bytes {0} [built]
       [] -> factory:3568ms building:95ms = 3663ms
 [759] ./src/images/control/handle_rotate.png 88 bytes {0} [built]
       [] -> factory:3569ms building:95ms = 3664ms
 [760] ./src/images/control/handle_zoom.png 86 bytes {0} [built]
       [] -> factory:3569ms building:95ms = 3664ms
 [761] ./src/images/control/handle_change.png 88 bytes {0} [built]
       [] -> factory:3570ms building:94ms = 3664ms
 [816] ./node_modules/css-loader?{"modules":true}!./node_modules/postcss-loader/lib?{}!./src/style.css 1.26 kB [built]
       [] -> factory:2ms building:3217ms = 3219ms
    + 805 hidden modules

ERROR in js/main-2a80142.js from UglifyJs
Unexpected token: name (QRCode) [js/main-2a80142.js:92156,6]
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 951 bytes {0} [built]
            factory:33ms building:34ms = 67ms
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
           [] -> factory:629ms building:9ms = 638ms
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
           [] -> factory:629ms building:7ms = 636ms
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--0-2
!node_modules/postcss-loader/lib/index.js??ref--0-3!src/style.css:
       [0] ./node_modules/css-loader?{"modules":true}!./node_modules/postcss-loader/lib?{"plugins":[null,{"version":"5.2.1
7","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,nul
l,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.1
7"}]}!./src/style.css 1.26 kB {0} [built]
            factory:7ms building:58ms = 65ms
        + 1 hidden module

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run"
"build"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack --progress --profile --colors --config webpack.pro.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --progress --profile --colors --config webpack.pro.conf
ig.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the custom-webpack3 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --progress --profile --colors --config webpack.pro.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs custom-webpack3
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls custom-webpack3
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\custom\npm-debug.log

error file
line 92156

class QRCode extends React.Component {
    shouldComponentUpdate(nextProps) {
        var that = this;
        return Object.keys(QRCode.propTypes).some(function(k) {
            return that.props[k] !== nextProps[k];
        });
    }

    componentDidMount() {
        this.update();
    }

...

No "onLoaded" callback

Is there no way to know when the canvas has loaded a successful QR code?

attachRefs 问题。Minified React error 。

提示压缩了之后的错误。错误如下，

Uncaught Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

错误描述的详情： http://facebook.github.io/react/docs/error-decoder.html?invariant=119

看样子，生产代码肯定是压缩的，问题感觉没法解决的。

所以我看着代码直接改成自己的版本了。
因为我的项目中大量使用 lodash ，而且没有使用 React.createClass 写 propTypes ，因此直接使用 lodash 判断 shouldComponentUpdate 了，另外习惯问题，没使用 React.createClass ，而是使用了 class Component extends React.Component 形式，所以打包的时候需要使用 babel 另行打包。

import React from 'react';
import _ from 'lodash';
import qr from 'qr.js';

function getBackingStorePixelRatio(ctx) {
  return (
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio ||
    1
  );
}

const defaultProps = {
  size: 128,
  bgColor: '#FFFFFF',
  fgColor: '#000000',
  value: 'http://facebook.github.io/react/',
};

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    debugAdd('qrcode', this);
  }

  componentWillMount = () => {}
  componentDidMount = () => {
    this.update();
  }

  shouldComponentUpdate = (nextProps) => {
    return !_.isEqual(nextProps, this.props);
  }

  componentDidUpdate = () => {
    this.update();
  }

  utf16to8 = (str) => {
    let out;
    const len = str.length;
    let c;
    out = '';
    for (let i = 0; i < len; i += 1) {
      c = str.charCodeAt(i);
      if ((0x0001 <= c) && (0x007F >= c)) {
        out += str.charAt(i);
      }
      else if (0x07FF < c) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      }
      else {
        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      }
    }
    return out;
  }

  canvasRef = (canvas) => {
    this.canvas = canvas;
  }

  update = () => {
    window.console.log('qrcode update');
    const { value, size, fgColor, bgColor, logo, logoWidth, logoHeight } = Object.assign({}, defaultProps, this.props);
    const qrcode = qr(this.utf16to8(value));
    debugAdd('qrcode_qrcode', qrcode);
    const canvas = this.canvas;

    const ctx = canvas.getContext('2d');
    const cells = qrcode.modules;
    const tileW = size / cells.length;
    const tileH = size / cells.length;
    const scale = window.devicePixelRatio / getBackingStorePixelRatio(ctx);
    canvas.height = canvas.width = size * scale;
    ctx.scale(scale, scale);

    cells.forEach((row, rdx) => {
      row.forEach((cell, cdx) => {
        ctx.fillStyle = cell ? fgColor : bgColor;
        const w = (Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW));
        const h = (Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH));
        ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h);
      }, this);
    }, this);

    if (logo) {
      const image = document.createElement('img');
      image.onload = () => {
        const dwidth = logoWidth || size * 0.2;
        const dheight = logoHeight || (image.height / image.width) * dwidth;
        const dx = (size - dwidth) / 2;
        const dy = (size - dheight) / 2;
        image.width = dwidth;
        image.height = dheight;
        ctx.drawImage(image, dx, dy, dwidth, dheight);
      };
      image.src = logo;
    }
  }

  render() {
    const { size = 128 } = Object.assign({}, defaultProps, this.props);

    return (<canvas ref={this.canvasRef} style={{ height: size, width: size }} height={size} width={size} />);
  }
}

export default Component;

Jest Snapshot Test Failure: Cannot read property 'getContext' of null

// tests.js

import * as React from 'react';
import renderer from 'react-test-renderer';

import QrCode from '.';

it('renders correctly', () => {
  const tree = renderer
    .create(<QrCode />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Error:

    TypeError: Cannot read property 'getContext' of null

       6 | it('renders correctly', () => {
       7 |   const tree = renderer
    >  8 |     .create(<QrCode />)

Press and hold QR code

can this support press and hold QR code?

Please pre-compile the module to ES5

Right now you are publishing the ES6 version of the module directly to npm which is not recommended, because it breaks tools like create-react-app. I'd be happy to add a PR for this, if that'd help.

[0.1.16]: QR Codes no longer render

I had QR Codes rendering properly on 0.1.15 after using Babili to parse the code, but after upgrading to 0.1.16 my QR codes no longer render and i get this error in console:

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

step1. attr "logo" existence of cross domains.

step2.document.querySelector("canvas[width='256']"). toDataURL("image/png")

then, console report errors

应该做个绘制完成的回调吧

这样的话做很多业务都方便

The logo must be a picture url? how to solve it when i want to put string

Prints very bad (on paper)

[UglifyJS]: Transpile to ES5 before publishing to NPM

I'm working on a NextJS app and ran into issues building this library in production.

There appears to be some ES6 code being used that UglifyJS cannot interpret. Can we transpile this module into ES5 before publishing to NPM?

In mobile terminal how to use rem to set the size of two-dimensional code dynamically

In mobile terminal how to use rem to set the size of two-dimensional code dynamically