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 { truncate } from 'lodash';
|
||||
import { hexToNpub } from '../../utils';
|
||||
import { toPdfFiles } from '../../utils/pdf.ts'
|
||||
PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
||||
|
||||
interface Props {
|
||||
selectedFiles: any[]
|
||||
selectedFiles: File[]
|
||||
users: User[]
|
||||
metadata: { [key: string]: ProfileMetadata }
|
||||
onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
|
||||
@ -315,73 +316,12 @@ export const DrawPDFFields = (props: Props) => {
|
||||
* creates the pdfFiles object and sets to a state
|
||||
*/
|
||||
const parsePdfPages = async () => {
|
||||
const pdfFiles: PdfFile[] = []
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
|
||||
console.log('pdf files: ', 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
|
||||
|
@ -340,7 +340,7 @@ export const CreatePage = () => {
|
||||
}
|
||||
|
||||
const createMarkConfig = (fileHashes: { [key: string]: string }) => {
|
||||
let markConfig: any = {}
|
||||
const markConfig: any = {}
|
||||
|
||||
drawnPdfs.forEach(drawnPdf => {
|
||||
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