vue-qrcode-reader - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

package.json

 {
   "name": "vue-qrcode-reader",
   "description": "A Vue.js component, accessing the device camera and allowing users to read QR-Codes, within the browser",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "author": {
@@ -6,0 +6,0 @@ "name": "Niklas Gruhn",

README.md

@@ -59,2 +59,16 @@ <p align="center">
 
+# API
+
+| Prop      | Valid Types           | Default                   |
+|-----------|-----------------------|---------------------------|
+| `:track`  | `Boolean`, `Function` | `true`                    |
+| `:paused` | `Boolean`             | `false`                   |
+| `:camera` | `Boolean`, `Object`   | see [Usage](#camera-prop) |
+
+| Event     | Payload Type      |
+|-----------|-------------------|
+| `@decode` | `String`          |
+| `@detect` | `Promise<Object>` |
+| `@init`   | `Promise<void>`   |
+
 # Usage
@@ -162,3 +176,3 @@
 
-> Avoid access to reactive properties in this function (like stuff in `data`, `computed` or your Vuex store). The function is called several times a second and might cause memory leaks. If you want to be save don't access `this` at all.
+> Avoid access to reactive properties in this function (like stuff in `data`, `computed` or your Vuex store). The function is called several times a second and might cause memory leaks. If you want to be safe don't access `this` at all.
 
@@ -173,22 +187,23 @@ Say you want to paint in a different color that better fits your overall page theme.
   repaintLocation (location, ctx) {
-    if (location !== null) {
-      const {
-        topLeftCorner,
-        topRightCorner,
-        bottomLeftCorner,
-        bottomRightCorner,
-      } = location
+    const {
+      topLeftCorner,
+      topRightCorner,
+      bottomLeftCorner,
+      bottomRightCorner,
+      // topLeftFinderPattern,
+      // topRightFinderPattern,
+      // bottomLeftFinderPattern
+    } = location
 
-      ctx.strokeStyle = 'blue' // instead of red
+    ctx.strokeStyle = 'blue' // instead of red
 
-      ctx.beginPath()
-      ctx.moveTo(topLeftCorner.x, topLeftCorner.y)
-      ctx.lineTo(bottomLeftCorner.x, bottomLeftCorner.y)
-      ctx.lineTo(bottomRightCorner.x, bottomRightCorner.y)
-      ctx.lineTo(topRightCorner.x, topRightCorner.y)
-      ctx.lineTo(topLeftCorner.x, topLeftCorner.y)
-      ctx.closePath()
+    ctx.beginPath()
+    ctx.moveTo(topLeftCorner.x, topLeftCorner.y)
+    ctx.lineTo(bottomLeftCorner.x, bottomLeftCorner.y)
+    ctx.lineTo(bottomRightCorner.x, bottomRightCorner.y)
+    ctx.lineTo(topRightCorner.x, topRightCorner.y)
+    ctx.lineTo(topLeftCorner.x, topLeftCorner.y)
+    ctx.closePath()
 
-      ctx.stroke()
-    }
+    ctx.stroke()
   }
@@ -305,11 +320,8 @@ }
 
-You need to include a script and CSS file. You can pull both from [unpkg.com](https://unpkg.com). Make sure to replace `[VERSION]` with the version you need (for example `1.0.1`):
+> All the examples on the demo page utilize [single-file components](https://vuejs.org/v2/guide/single-file-components.html). To use them in your project you need a build tool like webpack. Check out [#35](../../issues/35) for a simpler example you can use right in the browser.
 
-```html
-<link rel="stylesheet" href="https://unpkg.com/vue-qrcode-reader@[VERSION]/dist/vue-qrcode-reader.css"/>
+Besides Vue you need to include the following CSS and JS file:
+ * `<link href="`[vue-qrcode-reader.css](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.css)`"  rel="stylesheet">`
+ * `<script src="`[vue-qrcode-reader.browser.js](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.browser.js)`"></script>`
 
-<script src="vue.js"></script>
-<script src="https://unpkg.com/vue-qrcode-reader@[VERSION]/dist/vue-qrcode-reader.browser.js"></script>
-```
-
 The plugin should be auto-installed. If not, you can install it manually.
@@ -334,1 +346,2 @@
 ```
+

src/index.js

 import QrcodeReader from './components/QrcodeReader.vue'
+// import QrcodeDropZone from './components/QrcodeDropZone.vue'
 
@@ -9,3 +10,6 @@ // Install the components
 // Expose the components
-export { QrcodeReader }
+export {
+  QrcodeReader,
+  // QrcodeDropZone,
+}
 
@@ -12,0 +16,0 @@ /* -- Plugin definition & Auto-install -- */

src/misc/camera.js

@@ -43,5 +43,2 @@ import { imageDataFromVideo } from './image-data.js'
 
-  videoEl.playsInline = true
-  videoEl.play() // firefox does not emit `loadeddata` if video not playing
-
   await streamLoaded
@@ -48,0 +45,0 @@

src/misc/image-data.js

@@ -7,22 +7,27 @@ import { DropImageFetchError, DropImageDecodeError } from './errors.js'
 
-export function imageDataFromImage (imageElement) {
-  canvas.width = imageElement.naturalWidth
-  canvas.height = imageElement.naturalHeight
+canvas.width = 1920
+canvas.height = 1080
 
-  const bounds = [0, 0, canvas.width, canvas.height]
+function imageDataFromCanvas (canvasImageSource, width, height) {
+  const scalingRatio = Math.min(1, canvas.width / width, canvas.height / height)
+  const widthScaled = scalingRatio * width
+  const heightScaled = scalingRatio * height
 
-  canvasCtx.drawImage(imageElement, ...bounds)
+  canvasCtx.drawImage(canvasImageSource, 0, 0, widthScaled, heightScaled)
 
-  return canvasCtx.getImageData(...bounds)
+  return canvasCtx.getImageData(0, 0, widthScaled, heightScaled)
 }
 
-export function imageDataFromVideo (videoElement) {
-  canvas.width = videoElement.videoWidth
-  canvas.height = videoElement.videoHeight
+export function imageDataFromImage (imageElement) {
+  const width = imageElement.naturalWidth
+  const height = imageElement.naturalHeight
 
-  const bounds = [0, 0, canvas.width, canvas.height]
+  return imageDataFromCanvas(imageElement, width, height)
+}
 
-  canvasCtx.drawImage(videoElement, ...bounds)
+export function imageDataFromVideo (videoElement) {
+  const width = videoElement.videoWidth
+  const height = videoElement.videoHeight
 
-  return canvasCtx.getImageData(...bounds)
+  return imageDataFromCanvas(videoElement, width, height)
 }
@@ -29,0 +34,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

824013

increased by0.31%

Number of package files

44

increased by4.76%

Lines of code

956

increased by0.74%

Number of lines in readme file

343

increased by3.94%

No dependency changes