Nine Parsecs from Milwaukee
    Have ideas to improve npm?Join in the discussion! »

    qartjs

    1.2.0 • Public • Published

    qart.js

    CDNJS Downloads Version License
    Merges Pictures and QR Codes for Artistic QR Codes.

    Glance At

    https://kciter.github.io/qart.js/

    Installation

    NPM

    $ npm install qartjs
    

    or clone this repository and copy qart.min.js to your project.

    CDN

    <script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>

    Usage

    In the browser

    <script src="../dist/qart.min.js"></script>
    <script>
      // directly appending canvas to the document
      new QArt({
        value: value,
        imagePath: './example.png',
        filter: filter,
        size: 195
        }).make(document.getElementById('qart'));
     
        // using callback
        new QArt({
          value: value,
          imagePath: './example.png',
          filter: filter,
          size: 195
       }).make(function (canvas) {
         document.getElementById('qart').appendChild(canvas)
       });
    </script> 

    With ES6

    import QArt from 'qartjs';
    const qart = new QArt({
      value: value,
      imagePath: './example.png',
      filter: filter,
      size: 195
    });
     
    // directly appending canvas to the document
    qart.make(document.getElementById('qart'))
     
    // using callback
    qart.make((canvas) => {
      document.getElementById('qart').appendChild(canvas);
    });

    With React

    This is a simple implementation of QArt as React Component. react-qart

    With Angular.JS

    There is a directive available for using qart.js in Angular.js: angular-qart

    With Vue 2.x

    There is a directive available for using qart.js in Vue.js 2.x : vue-qart

    Options

    Field Type Description Default
    value String The data of the QR code. Required
    imagePath String The path of the combined image. Required
    filter String Define an image filter. threshold or color threshold
    size Integer Define an image size in pixels. 195
    version Integer QRCode version (1 <= version <= 40) 10
    background CSSColor Implement background if exist undefinded
    fillType scale_to_fit/fill Place image type(fill or scale to fit) scale_to_fit

    Dependency

    Inspire

    TODO

    • Server-Side Rendering.
    • CLI Command.

    Donate

    If you like this open source, you can sponsor it. 😄

    Paypal me

    LICENSE

    GPLv3

    Keywords

    Install

    npm i qartjs

    DownloadsWeekly Downloads

    232

    Version

    1.2.0

    License

    GPL-3.0

    Unpacked Size

    669 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar