adds pdf util
This commit is contained in:
parent
3ae7d09fa4
commit
3157ca1eec
@ -8,10 +8,11 @@ import { ProfileMetadata, User } from '../../types';
|
|||||||
import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
|
import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
|
||||||
import { truncate } from 'lodash';
|
import { truncate } from 'lodash';
|
||||||
import { hexToNpub } from '../../utils';
|
import { hexToNpub } from '../../utils';
|
||||||
|
import { toPdfFiles } from '../../utils/pdf.ts'
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
selectedFiles: any[]
|
selectedFiles: File[]
|
||||||
users: User[]
|
users: User[]
|
||||||
metadata: { [key: string]: ProfileMetadata }
|
metadata: { [key: string]: ProfileMetadata }
|
||||||
onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
|
onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
|
||||||
@ -315,73 +316,12 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
* creates the pdfFiles object and sets to a state
|
* creates the pdfFiles object and sets to a state
|
||||||
*/
|
*/
|
||||||
const parsePdfPages = async () => {
|
const parsePdfPages = async () => {
|
||||||
const pdfFiles: PdfFile[] = []
|
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
|
||||||
|
console.log('pdf files: ', pdfFiles);
|
||||||
for (const file of selectedFiles) {
|
|
||||||
if (file.type.toLowerCase().includes('pdf')) {
|
|
||||||
const data = await readPdf(file)
|
|
||||||
const pages = await pdfToImages(data)
|
|
||||||
|
|
||||||
pdfFiles.push({
|
|
||||||
file: file,
|
|
||||||
pages: pages,
|
|
||||||
expanded: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setPdfFiles(pdfFiles)
|
setPdfFiles(pdfFiles)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts pdf to the images
|
|
||||||
* @param data pdf file bytes
|
|
||||||
*/
|
|
||||||
const pdfToImages = async (data: any): Promise<PdfPage[]> => {
|
|
||||||
const images: string[] = [];
|
|
||||||
const pdf = await PDFJS.getDocument(data).promise;
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
|
|
||||||
for (let i = 0; i < pdf.numPages; i++) {
|
|
||||||
const page = await pdf.getPage(i + 1);
|
|
||||||
const viewport = page.getViewport({ scale: 3 });
|
|
||||||
const context = canvas.getContext("2d");
|
|
||||||
canvas.height = viewport.height;
|
|
||||||
canvas.width = viewport.width;
|
|
||||||
await page.render({ canvasContext: context!, viewport: viewport }).promise;
|
|
||||||
images.push(canvas.toDataURL());
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.resolve(images.map((image) => {
|
|
||||||
return {
|
|
||||||
image,
|
|
||||||
drawnFields: []
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reads the pdf file binaries
|
|
||||||
*/
|
|
||||||
const readPdf = (file: File) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
|
|
||||||
reader.onload = (e: any) => {
|
|
||||||
const data = e.target.result
|
|
||||||
|
|
||||||
resolve(data)
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.onerror = (err) => {
|
|
||||||
console.error('err', err)
|
|
||||||
reject(err)
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @returns if expanded pdf accordion is present
|
* @returns if expanded pdf accordion is present
|
||||||
|
@ -340,7 +340,7 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const createMarkConfig = (fileHashes: { [key: string]: string }) => {
|
const createMarkConfig = (fileHashes: { [key: string]: string }) => {
|
||||||
let markConfig: any = {}
|
const markConfig: any = {}
|
||||||
|
|
||||||
drawnPdfs.forEach(drawnPdf => {
|
drawnPdfs.forEach(drawnPdf => {
|
||||||
const fileHash = fileHashes[drawnPdf.file.name]
|
const fileHash = fileHashes[drawnPdf.file.name]
|
||||||
|
78
src/utils/pdf.ts
Normal file
78
src/utils/pdf.ts
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import { PdfFile, PdfPage } from '../types/drawing.ts'
|
||||||
|
import * as PDFJS from 'pdfjs-dist'
|
||||||
|
PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
||||||
|
|
||||||
|
const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
|
||||||
|
const blob = new Blob([arrayBuffer], { type: "application/pdf" });
|
||||||
|
return new File([blob], fileName, { type: "application/pdf" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const toPdfFile = async (file: File): Promise<PdfFile> => {
|
||||||
|
const data = await readPdf(file)
|
||||||
|
const pages = await pdfToImages(data)
|
||||||
|
return { file, pages, expanded: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
|
||||||
|
return Promise.all(
|
||||||
|
selectedFiles
|
||||||
|
.filter(isPdf)
|
||||||
|
.map(toPdfFile));
|
||||||
|
}
|
||||||
|
|
||||||
|
const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reads the pdf file binaries
|
||||||
|
*/
|
||||||
|
const readPdf = (file: File) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = (e: any) => {
|
||||||
|
const data = e.target.result
|
||||||
|
|
||||||
|
resolve(data)
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = (err) => {
|
||||||
|
console.error('err', err)
|
||||||
|
reject(err)
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts pdf to the images
|
||||||
|
* @param data pdf file bytes
|
||||||
|
*/
|
||||||
|
const pdfToImages = async (data: any): Promise<PdfPage[]> => {
|
||||||
|
const images: string[] = [];
|
||||||
|
const pdf = await PDFJS.getDocument(data).promise;
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
|
||||||
|
for (let i = 0; i < pdf.numPages; i++) {
|
||||||
|
const page = await pdf.getPage(i + 1);
|
||||||
|
const viewport = page.getViewport({ scale: 3 });
|
||||||
|
const context = canvas.getContext("2d");
|
||||||
|
canvas.height = viewport.height;
|
||||||
|
canvas.width = viewport.width;
|
||||||
|
await page.render({ canvasContext: context!, viewport: viewport }).promise;
|
||||||
|
images.push(canvas.toDataURL());
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve(images.map((image) => {
|
||||||
|
return {
|
||||||
|
image,
|
||||||
|
drawnFields: []
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
toFile,
|
||||||
|
toPdfFile,
|
||||||
|
toPdfFiles
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user