export async function convertFromPdf(f: any) {
const pdfjsLib = require("pdfjs-dist/webpack");
const pdf = await pdfjsLib.getDocument(f).promise;
const pdfPages = await toImageData(pdf);
const pages = await Promise.all(
pdfPages.map(async (x) => {
if (!x) return null;
const canvas = document.createElement("canvas");
canvas.width = x.width;
canvas.height = x.height;
const ctx = canvas.getContext("2d");
ctx?.putImageData(x, 0, 0);
const blob = await new Promise<Blob | null>((resolve) => {
canvas.toBlob((blob) => resolve(blob));
});
if (!blob) return null;
const reader = new FileReader();
reader.readAsDataURL(blob);
return await new Promise<string>((resolve) => {
reader.onloadend = () => resolve(reader.result as string);
});
})
);
return pages.filter((x) => x !== null) as string[];
}
async function toImageData(pdf: any) {
const pdfPages = [];
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement("canvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");
const renderContext = { canvasContext: ctx, viewport: viewport };
await page.render(renderContext).promise;
pdfPages.push(ctx?.getImageData(0, 0, canvas.width, canvas.height));
}
return pdfPages;
}
So I’m using the function above to convert pdf to image files (png). But somehow in certain cases, reader.readAsDataURL(blob)
returns the same exact string for 2 different pages of the pdf. This is definitely bad because I want to make use of the url differently later on the UI part of things, but this will confuse the UI when doing certain selection as both will get selected as they both have the same url. Why does this happen?