Merge pull request #64 from neocotic/develop

2.2.0

CHANGES.md

@@ -1,3 +1,7 @@
+## Version 2.2.0, 2016.10.30
+
+* Add `backgroundAlpha` and `foregroundAlpha` options to control transparency [#63](https://github.com/neocotic/qrious/issues/63)
+
 ## Version 2.1.0, 2016.10.04
 
 * Allow `padding` to be set explicitly [#44](https://github.com/neocotic/qrious/issues/44)

README.md

@@ -105,20 +105,24 @@ Open up `demo.html` in your browser to play around a bit.
 Simply create an instance of `QRious` and you've done most of the work. You can control many aspects of the QR code
 using the following fields on your instance:
 
-| Field      | Type   | Description                                        | Default       |
-| ---------- | ------ | -------------------------------------------------- | ------------- |
-| background | String | Background color of the QR code                    | `"white"`     |
-| foreground | String | Foreground color of the QR code                    | `"black"`     |
-| level      | String | Error correction level of the QR code (L, M, Q, H) | `"L"`         |
-| mime       | String | MIME type used to render the image for the QR code | `"image/png"` |
-| padding    | Number | Padding for the QR code (pixels)                   | `null` (auto) |
-| size       | Number | Size of the QR code (pixels)                       | `100`         |
-| value      | String | Value encoded within the QR code                   | `""`          |
+| Field           | Type   | Description                                        | Default       |
+| --------------- | ------ | -------------------------------------------------- | ------------- |
+| background      | String | Background color of the QR code                    | `"white"`     |
+| backgroundAlpha | Number | Background alpha of the QR code                    | `1.0`         |
+| foreground      | String | Foreground color of the QR code                    | `"black"`     |
+| foregroundAlpha | Number | Foreground alpha of the QR code                    | `1.0`         |
+| level           | String | Error correction level of the QR code (L, M, Q, H) | `"L"`         |
+| mime            | String | MIME type used to render the image for the QR code | `"image/png"` |
+| padding         | Number | Padding for the QR code (pixels)                   | `null` (auto) |
+| size            | Number | Size of the QR code (pixels)                       | `100`         |
+| value           | String | Value encoded within the QR code                   | `""`          |
 
 ``` javascript
 const qr = new QRious()
 qr.background = '#000'
+qr.backgroundAlpha = 0.8
 qr.foreground = '#fff'
+qr.foregroundAlpha = 0.8
 qr.level = 'H'
 qr.padding = 25
 qr.size = 500
@@ -130,7 +134,9 @@ These can also be passed as options to the constructor itself:
 ``` javascript
 const qr = new QRious({
   background: '#000',
+  backgroundAlpha: 0.8,
   foreground: '#fff',
+  foregroundAlpha: 0.8,
   level: 'H',
   padding: 25,
   size: 500,
@@ -187,7 +193,7 @@ The current version of `QRious`.
 
 ``` javascript
 console.log(QRious.VERSION)
-//=> "2.1.0"
+//=> "2.2.0"
 ```
 
 ## Migrating from v1

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "qrious",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Library for QR code generation using canvas",
   "homepage": "https://github.com/neocotic/qrious",
   "authors": [

demo.html

@@ -121,14 +121,24 @@
       </label>
 
       <label>
-        background
+        background color
         <input type="color" name="background" value="#ffffff">
       </label>
 
       <label>
-        foreground
+        background alpha
+        <input type="number" name="backgroundAlpha" placeholder="1" min="0" max="1" step="0.1" value="1">
+      </label>
+
+      <label>
+        foreground color
         <input type="color" name="foreground" value="#000000">
       </label>
+
+      <label>
+        foreground alpha
+        <input type="number" name="foregroundAlpha" placeholder="1" min="0" max="1" step="0.1" value="1">
+      </label>
     </form>
   </section>
 </main>
@@ -137,7 +147,9 @@
 <script>
   (function() {
     var $background = document.querySelector('main form [name="background"]')
+    var $backgroundAlpha = document.querySelector('main form [name="backgroundAlpha"]')
     var $foreground = document.querySelector('main form [name="foreground"]')
+    var $foregroundAlpha = document.querySelector('main form [name="foregroundAlpha"]')
     var $level = document.querySelector('main form [name="level"]')
     var $section = document.querySelector('main section')
     var $padding = document.querySelector('main form [name="padding"]')
@@ -154,10 +166,18 @@
       qr.background = $background.value || null
     })
 
+    $backgroundAlpha.addEventListener('change', function() {
+      qr.backgroundAlpha = $backgroundAlpha.value || null
+    })
+
     $foreground.addEventListener('change', function() {
       qr.foreground = $foreground.value || null
     })
 
+    $foregroundAlpha.addEventListener('change', function() {
+      qr.foregroundAlpha = $foregroundAlpha.value || null
+    })
+
     $level.addEventListener('change', function() {
       qr.level = $level.value
     })