mirror of
https://github.com/covidpass-org/covidpass.git
synced 2025-02-16 19:50:42 +01:00
Add jpeg and png file types
This commit is contained in:
parent
e2e39aae3c
commit
54848cb87c
@ -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
25
package-lock.json
generated
@ -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",
|
||||
|
@ -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
54
src/process.js
Normal 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)
|
||||
})
|
||||
})
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user