PDF Markings #114

Merged
eugene merged 33 commits from issue-99 into staging 2024-08-06 10:02:04 +00:00
3 changed files with 83 additions and 65 deletions
Showing only changes of commit bf167d78f2 - Show all commits

View File

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

View File

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