README.md (7607B)
1 .d88888b. 8888888b. d8b 2 d88P" "Y88b 888 Y88b Y8P 3 888 888 888 888 4 888 888 888 d88P 888 .d88b. 888 888 .d8888b 5 888 888 8888888P" 888 d88""88b 888 888 88K 6 888 Y8b 888 888 T88b 888 888 888 888 888 "Y8888b. 7 Y88b.Y8b88P 888 T88b 888 Y88..88P Y88b 888 X88 8 "Y888888" 888 T88b 888 "Y88P" "Y88888 88888P' 9 Y8b 10 11 [QRious](https://github.com/neocotic/qrious) is a pure JavaScript library for generating QR codes using HTML5 canvas. 12 13 [](https://gitter.im/neocotic/qrious) 14 [](https://codepen.io/neocotic/pen/YQzmBm) 15 [](https://david-dm.org/neocotic/qrious?type=dev) 16 [](https://github.com/neocotic/qrious/blob/master/LICENSE.md) 17 [](https://www.npmjs.com/package/qrious) 18 19 * [Install](#install) 20 * [Examples](#examples) 21 * [API](#api) 22 * [Migrating from older versions](#migrating-from-older-versions) 23 * [Bugs](#bugs) 24 * [Contributors](#contributors) 25 * [License](#license) 26 27 ## Install 28 29 Install using the package manager for your desired environment(s): 30 31 ``` bash 32 $ npm install --save qrious 33 # OR: 34 $ bower install --save qrious 35 ``` 36 37 If you want to simply download the file to be used in the browser you can find them below: 38 39 * [Development Version](https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js) (71kb - [Source Map](https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js.map)) 40 * [Production Version](https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js) (18kb - [Source Map](https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js.map)) 41 42 Check out [node-qrious](https://github.com/neocotic/node-qrious) if you want to install it for use within 43 [Node.js](https://nodejs.org). 44 45 ## Examples 46 47 ``` html 48 <!DOCTYPE html> 49 <html> 50 <body> 51 <canvas id="qr"></canvas> 52 53 <script src="/path/to/qrious.js"></script> 54 <script> 55 (function() { 56 var qr = new QRious({ 57 element: document.getElementById('qr'), 58 value: 'https://github.com/neocotic/qrious' 59 }); 60 })(); 61 </script> 62 </body> 63 </html> 64 ``` 65 66 Open up `demo.html` in your browser to play around a bit. 67 68 ## API 69 70 Simply create an instance of `QRious` and you've done most of the work. You can control many aspects of the QR code 71 using the following fields on your instance: 72 73 | Field | Type | Description | Default | Read Only | 74 | --------------- | ------- | -------------------------------------------------- | ------------- | --------- | 75 | background | String | Background color of the QR code | `"white"` | No | 76 | backgroundAlpha | Number | Background alpha of the QR code | `1.0` | No | 77 | element | Element | Element to render the QR code | `<canvas>` | Yes | 78 | foreground | String | Foreground color of the QR code | `"black"` | No | 79 | foregroundAlpha | Number | Foreground alpha of the QR code | `1.0` | No | 80 | level | String | Error correction level of the QR code (L, M, Q, H) | `"L"` | No | 81 | mime | String | MIME type used to render the image for the QR code | `"image/png"` | No | 82 | padding | Number | Padding for the QR code (pixels) | `null` (auto) | No | 83 | size | Number | Size of the QR code (pixels) | `100` | No | 84 | value | String | Value encoded within the QR code | `""` | No | 85 86 ``` javascript 87 var qr = new QRious(); 88 qr.background = 'green'; 89 qr.backgroundAlpha = 0.8; 90 qr.foreground = 'blue'; 91 qr.foregroundAlpha = 0.8; 92 qr.level = 'H'; 93 qr.padding = 25; 94 qr.size = 500; 95 qr.value = 'https://github.com/neocotic/qrious'; 96 ``` 97 98 The QR code will automatically update when you change one of these fields, so be wary when you plan on changing lots of 99 fields at the same time. You probably want to make a single call to `set(options)` instead as it will only update the QR 100 code once: 101 102 ``` javascript 103 var qr = new QRious(); 104 qr.set({ 105 background: 'green', 106 backgroundAlpha: 0.8, 107 foreground: 'blue', 108 foregroundAlpha: 0.8, 109 level: 'H', 110 padding: 25, 111 size: 500, 112 value: 'https://github.com/neocotic/qrious' 113 }); 114 ``` 115 116 These can also be passed as options to the constructor itself: 117 118 ``` javascript 119 var qr = new QRious({ 120 background: 'green', 121 backgroundAlpha: 0.8, 122 foreground: 'blue', 123 foregroundAlpha: 0.8, 124 level: 'H', 125 padding: 25, 126 size: 500, 127 value: 'https://github.com/neocotic/qrious' 128 }); 129 ``` 130 131 You can also pass in an `element` option to the constructor which can be used to generate the QR code using an existing 132 DOM element, which is the only time that you can specify read only options. `element` must either be a `<canvas>` 133 element or an `<img>` element which can then be accessed via the `canvas` or `image` fields on the instance 134 respectively. An element will be created for whichever one isn't provided or for both if no `element` is specified, 135 which means that they can be appended to the document at a later time. 136 137 ``` javascript 138 var qr = new QRious({ 139 element: document.querySelector('canvas'), 140 value: 'https://github.com/neocotic/qrious' 141 }); 142 143 qr.canvas.parentNode.appendChild(qr.image); 144 ``` 145 146 A reference to the `QRious` instance is also stored on both of the elements for convenience. 147 148 ``` javascript 149 var canvas = document.querySelector('canvas'); 150 var qr = new QRious({ 151 element: canvas, 152 value: 'https://github.com/neocotic/qrious' 153 }); 154 155 qr === canvas.qrious; 156 //=> true 157 ``` 158 159 ### `toDataURL([mime])` 160 161 Generates a base64 encoded data URI for the QR code. If you don't specify a MIME type, it will default to the one 162 passed to the constructor as an option or the default value for the `mime` option. 163 164 ``` javascript 165 var qr = new QRious({ 166 value: 'https://github.com/neocotic/qrious' 167 }); 168 169 qr.toDataURL(); 170 //=> "data:image/png;base64,iVBOR...AIpqDnseH86KAAAAAElFTkSuQmCC" 171 qr.toDataURL('image/jpeg'); 172 //=> "data:image/jpeg;base64,/9j/...xqAqIqgKFAAAAAq3RRQAUUUUAf/Z" 173 ``` 174 175 ## Migrating from older versions 176 177 If you've been using an older major version and would like details on what's changed and information on how to migrate 178 to the latest major release below: 179 180 https://github.com/neocotic/qrious/wiki/Migrating-from-older-versions 181 182 ## Bugs 183 184 If you have any problems with QRious or would like to see changes currently in development you can do so 185 [here](https://github.com/neocotic/nqrious/issues). Core features and issues are maintained separately 186 [here](https://github.com/neocotic/qrious-core/issues). 187 188 ## Contributors 189 190 If you want to contribute, you're a legend! Information on how you can do so can be found in 191 [CONTRIBUTING.md](https://github.com/neocotic/qrious/blob/master/CONTRIBUTING.md). We want your suggestions and pull 192 requests! 193 194 A list of QRious contributors can be found in [AUTHORS.md](https://github.com/neocotic/qrious/blob/master/AUTHORS.md). 195 196 ## License 197 198 Copyright © 2017 Alasdair Mercer 199 Copyright © 2010 Tom Zerucha 200 201 See [LICENSE.md](https://github.com/neocotic/qrious/blob/master/LICENSE.md) for more information on our GPLv3 license.