diff --git a/components/Form.js b/components/Form.js
index 11739f6..c888cfc 100644
--- a/components/Form.js
+++ b/components/Form.js
@@ -5,6 +5,7 @@ import jsQR from "jsqr"
import {saveAs} from 'file-saver'
import {decodeData} from "../src/decode"
+import { processJpeg, processPng, processPdf } from "../src/process"
import {createPass} from "../src/pass"
import Card from "../components/Card"
import Alert from "../components/Alert"
@@ -37,34 +38,33 @@ function Form() {
document.getElementById('spin').style.display = 'none'
}
- const processPdf = async function() {
+ const processFile = async function() {
document.getElementById('spin').style.display = 'block'
- const file = document.getElementById('pdf').files[0]
+ const file = document.getElementById('file').files[0]
+ const fileBuffer = await readFileAsync(file)
- const result = await readFileAsync(file)
- let typedArray = new Uint8Array(result)
+ let imageData
- const canvas = document.getElementById('canvas')
- const ctx = canvas.getContext('2d')
+ switch (file.type) {
+ case 'application/pdf':
+ console.log('pdf')
+ imageData = await processPdf(fileBuffer)
+ break
+ case 'image/jpeg':
+ console.log('jpeg')
+ imageData = await processJpeg(fileBuffer)
+ break
+ case 'image/png':
+ console.log('png')
+ imageData = await processPng(fileBuffer)
+ break
+ default:
+ error('Error', 'Invalid file type')
+ return
+ }
- let loadingTask = PDFJS.getDocument(typedArray)
- await loadingTask.promise.then(async function (pdfDocument) {
- const pdfPage = await pdfDocument.getPage(1)
- const viewport = pdfPage.getViewport({ scale: 1 })
- canvas.width = viewport.width
- canvas.height = viewport.height
-
- const renderTask = pdfPage.render({
- canvasContext: ctx,
- viewport,
- })
-
- return await renderTask.promise
- })
-
- let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
- let code = jsQR(imageData.data, imageData.width, imageData.height, {
+ var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert',
})
@@ -90,7 +90,7 @@ function Form() {
let result
try {
- result = await processPdf()
+ result = await processFile()
} catch {
error('Error:', 'Could not extract QR code data from PDF')
}
@@ -125,7 +125,7 @@ function Form() {
return (
diff --git a/package-lock.json b/package-lock.json
index 5dedd80..593e8f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
"cbor-js": "^0.1.0",
"do-not-zip": "^1.0.0",
"file-saver": "^2.0.5",
+ "jpeg-js": "^0.4.3",
"jsqr": "^1.4.0",
"next": "latest",
"next-seo": "^4.26.0",
"node-fetch": "^2.6.1",
"pdfjs-dist": "^2.5.207",
+ "pngjs": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.0.0",
@@ -4198,6 +4200,11 @@
"node": ">=10"
}
},
+ "node_modules/jpeg-js": {
+ "version": "0.4.3",
+ "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
+ "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5084,6 +5091,14 @@
"resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
"integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
},
+ "node_modules/pngjs": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
+ "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
+ "engines": {
+ "node": ">=12.13.0"
+ }
+ },
"node_modules/pnp-webpack-plugin": {
"version": "1.6.4",
"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -10009,6 +10024,11 @@
}
}
},
+ "jpeg-js": {
+ "version": "0.4.3",
+ "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
+ "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10767,6 +10787,11 @@
"resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
"integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
},
+ "pngjs": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
+ "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg=="
+ },
"pnp-webpack-plugin": {
"version": "1.6.4",
"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
diff --git a/package.json b/package.json
index 75e380e..45acac7 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,13 @@
"cbor-js": "^0.1.0",
"do-not-zip": "^1.0.0",
"file-saver": "^2.0.5",
+ "jpeg-js": "^0.4.3",
"jsqr": "^1.4.0",
"next": "latest",
"next-seo": "^4.26.0",
"node-fetch": "^2.6.1",
"pdfjs-dist": "^2.5.207",
+ "pngjs": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.0.0",
diff --git a/src/process.js b/src/process.js
new file mode 100644
index 0000000..ab13aed
--- /dev/null
+++ b/src/process.js
@@ -0,0 +1,54 @@
+const PDFJS = require('pdfjs-dist')
+PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`
+
+import jpeg from 'jpeg-js'
+import { PNG } from 'pngjs'
+
+export async function processPdf(file) {
+ var typedarray = new Uint8Array(file)
+
+ const canvas = document.getElementById('canvas')
+ const ctx = canvas.getContext('2d')
+
+ var loadingTask = PDFJS.getDocument(typedarray)
+ await loadingTask.promise.then(async function (pdfDocument) {
+ const pdfPage = await pdfDocument.getPage(1)
+ const viewport = pdfPage.getViewport({ scale: 1 })
+ canvas.width = viewport.width
+ canvas.height = viewport.height
+
+ const renderTask = pdfPage.render({
+ canvasContext: ctx,
+ viewport,
+ })
+
+ return await renderTask.promise
+ })
+
+ var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+
+ return imageData
+}
+
+export async function processJpeg(file) {
+ return jpeg.decode(file)
+}
+
+export async function processPng(file) {
+ const png = await readPngAsync(file)
+ return png
+}
+
+export async function readPngAsync(file) {
+ return new Promise(async (resolve, reject) => {
+ let png = new PNG({ filterType: 4 })
+
+ png.parse(file, (error, data) => {
+ if(error) {
+ reject()
+ }
+
+ resolve(data)
+ })
+ })
+}
\ No newline at end of file