From 54848cb87ca84586df6c8874235c9c2d029bfbb2 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Tue, 29 Jun 2021 01:11:08 +0200 Subject: [PATCH] Add jpeg and png file types --- components/Form.js | 54 +++++++++++++++++++++++----------------------- package-lock.json | 25 +++++++++++++++++++++ package.json | 2 ++ src/process.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 108 insertions(+), 27 deletions(-) create mode 100644 src/process.js 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 (
-
addToWallet(e)}> + addToWallet(e)}>

@@ -134,8 +134,8 @@ function Form() {

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