78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
|
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
|
||
|
|
}
|