Add jpeg and png file types

This commit is contained in:
Marvin Sextro 2021-06-29 01:11:08 +02:00
parent e2e39aae3c
commit 54848cb87c
4 changed files with 108 additions and 27 deletions

View File

@ -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 (
<div>
<form className="space-y-5" id="form" action="https://api.covidpass.marvinsextro.de/covid.pkpass" method="POST" onSubmit={(e) => addToWallet(e)}>
<form className="space-y-5" id="form" onSubmit={(e) => addToWallet(e)}>
<Card step={1} heading="Select Certificate" content={
<div className="space-y-5">
<p>
@ -134,8 +134,8 @@ function Form() {
<input
className="w-full"
type="file"
id="pdf"
accept="application/pdf"
id="file"
accept="application/pdf,image/jpeg,image/png"
required
/>
</div>

25
package-lock.json generated
View File

@ -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",

View File

@ -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",

54
src/process.js Normal file
View File

@ -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)
})
})
}