Extrahieren zusammengefügter Bilder als Einheit aus PDF in C# oder js ⇐ C#

[Anonymous]

Ich versuche, Bilder aus einem PDF abzurufen und Benutzern die Auswahl eines Bildes aus einem Raster zu ermöglichen. Im Wesentlichen arbeite ich an einem WYSIWYG-SOP-Editor. Ein Benutzer erstellt eine SOP (Standard Operating Procedure) unter Verwendung von Referenzmaterial und kann Bilder aus dem Quellmaterial in die SOP einfügen.
Ich kann die Bilder in C# (Backend) oder js extrahieren ( Frontend Nuxt3) kein Problem; Einige PDFs enthalten jedoch Bilder, bei denen es sich im Wesentlichen um zusammengesetzte Bilder handelt. Nehmen wir an, ich habe ein Bild von einem Auto. Ich extrahiere das Bild und in Wirklichkeit sind es fünf zusammengefügte Teilbilder. Ich habe versucht, die Bilder zusammenzufügen, indem ich überlappende Linien erkannt habe, aber manchmal sind sie diagonal oder in einer seltsamen Form unterbrochen, was die Sache sehr kompliziert macht.
Ich habe meinen ersten Leseversuch beigefügt Bilder aus einem PDF im Frontend mit tato30/vue-pdf. Wie Sie in der Sandbox unten sehen können, werden die ersten beiden Bilder problemlos abgerufen, aber dann gibt es jede Menge Teilbilder, bei denen es sich möglicherweise um Überlagerungen handelt? Das Seltsame ist, dass ich in der Sandbox auch eine URL für ein PDF nur einer einzelnen Seite und nicht für das gesamte PDF bereitgestellt habe. Wenn Sie diese in die VuePDF-Komponente einfügen, erhalten Sie nur zwei Bilder ...
https://codesandbox.io/p/devbox/ptmy44
BEARBEITEN
Falls Sie den Code nicht sehen können Sandbox, hier ist der Code.

import { ref } from 'vue';
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import * as PDFJS from 'pdfjs-dist';

const singlePagePdf = ref('https://stackoverflowrandomfile.blob.co ... xample.pdf');
const multiPagePdf = ref('https://stackoverflowrandomfile.blob.co ... le/Walmart Supply Chain Standards 2023.pdf');
const currentPage = ref(48);

let { pdf, pages } = usePDF(multiPagePdf.value);
const loaded = ref(false);

const switchPdf = () => {
loaded.value = false;
images.value = [];
let returnObj;
if (currentPage.value === 48) {
returnObj = usePDF(singlePagePdf.value);
currentPage.value = 1
}
else {
returnObj = usePDF(multiPagePdf.value);
currentPage.value = 48
}
pdf = returnObj.pdf;
}

const images = ref([]);

const getPageImages = (page: number, documentUrl: string) => {
loaded.value = true;
pdf.value.promise.then(async (document: any) => { // Replace 'any' with appropriate type if available
const pageProxy = await document.getPage(page);
const ops = await pageProxy.getOperatorList();
const objs: Array = [];

for (let i = 0; i < ops.fnArray.length; i++) {
if (
ops.fnArray === PDFJS.OPS.paintImageXObject ||
ops.fnArray === PDFJS.OPS.transform
) {
const argsVals = ops.argsArray;
objs.push({
type: ops.fnArray === PDFJS.OPS.paintImageXObject ? 'image' : 'transform',
transform: ops.fnArray === PDFJS.OPS.transform ? argsVals : null,
imageId: argsVals[0],
});
}
}

objs.map(async (val, i) => {
if (val.type === 'image') {
const imageKey = val.imageId;
pageProxy.objs.get(imageKey, async (obj: any) => { // Replace 'any' with appropriate type if available
const bitmap = await createImageBitmap(obj.bitmap);
const ocanvas = new OffscreenCanvas(bitmap.width, bitmap.height);

const ctx = ocanvas.getContext("bitmaprenderer");
if (ctx) {
ctx.transferFromImageBitmap(bitmap);
const blob = await ocanvas.convertToBlob({ type: "image/png" });
const blobUrl = URL.createObjectURL(blob);

const transform = objs.length > 1 && i > 0 ? objs : null;
images.value.push({
url: blobUrl,
transform: transform ? transform.transform : null,
page,
width: ocanvas.width,
height: ocanvas.height,
});
}
});
}
});
})
};



Switch Pdf

• 
  
  Wie vom PDF-Reader angezeigt. Eine Kopie der einzelnen Seite finden Sie unter https://easyupload.io/8lk59v