Hoe te Werken met Afbeeldingen en Graphics in TypeScript

Deze gids laat zien hoe je afbeeldingen en vectorafbeeldingen op een PDF-pagina plaatst met Aspose.PDF FOSS voor TypeScript. Page.AddImage() voegt rasterbytes in, Page.Graphics() retourneert een PageGraphics voor het tekenen van vormen, en Document.OptionalContent groepeert beide in in-/uitschakelbare lagen. Het vereist Node.js 22 of hoger.

Stapsgewijze handleiding

Stap 1: Installeer het pakket

git clone https://github.com/aspose-pdf-foss/Aspose.PDF-FOSS-for-TypeScript.git
cd Aspose.PDF-FOSS-for-TypeScript
npm install
npm run build

Verifieer de installatie door de Document klasse te importeren in een nieuw TypeScript bestand — deze regel zou zonder fout moeten slagen zodra het pakket geïnstalleerd is:

import { Document } from '@asposefoss/pdf';

Stap 2: Importeer vereiste klassen

Importeer Document om het bestand te openen; AddImage(), Graphics() en AddBarcode() worden rechtstreeks aangeroepen op de Page instanties die het retourneert:

import { Document } from '@asposefoss/pdf';

Stap 3: Een rasterafbeelding insluiten

Page.AddImage(data, rect, opts) plaatst JPEG- of PNG-bytes in een begrenzende rect, geschaald om te passen:

const doc = Document.OpenFile('input.pdf');
const page = doc.Pages[0];

const imgW = 300;
const imgH = 237; // aspect preserved from a 1280x1014 source
page.AddImage(imageBytes, [150, 400, 150 + imgW, 400 + imgH]);

Stap 4: Vectorafbeeldingen tekenen

Page.Graphics() retourneert een PageGraphics die tekenaanroepen buffert totdat apply() ze commit. Koppel setStrokeColor(), setFillColor(), setLineWidth() en vormmethoden zoals rect(), circle() en drawLine(), daarna stroke() / fill() / fillStroke():

const g = page.Graphics();

g.save()
  .setStrokeColor([0.55, 0.60, 0.75])
  .setLineWidth(1)
  .rect(80, 300, 435, 340)
  .stroke()
  .restore();

g.setFillColor([0.88, 0.91, 0.98])
  .setStrokeColor([0.45, 0.52, 0.75])
  .setLineWidth(1)
  .circle(120, 340, 13)
  .fillStroke();

g.apply();

Stap 5: Afbeeldingen en grafische elementen binden aan optionele-inhoudlagen

doc.OptionalContent.AddLayer(name, opts) maakt een Layer aan die kan worden in- of uitgeschakeld in het lagenpaneel van een viewer. Geef het door als layer aan AddImage(), of wikkel PageGraphics-aanroepen in BeginLayer() / EndLayer():

const oc = doc.OptionalContent;
const grid = oc.AddLayer('Grid', { visible: false }); // default off
const branding = oc.AddLayer('Branding');

const g2 = page.Graphics();
g2.BeginLayer(grid);
g2.save().setStrokeColor([0.72, 0.76, 0.88]).setLineWidth(0.4).setDash([3, 3]);
g2.drawLine(80, 300, 515, 300);
g2.stroke().restore();
g2.EndLayer();
g2.apply();

page.AddImage(logoBytes, [370, 606, 480, 640], { layer: branding });

Stap 6: Voeg een barcode toe

Page.AddBarcode(spec, rect, opts) tekent een barcode-symbool; spec.type selecteert de symbologie en spec.data is de gecodeerde payload. Net als AddImage() accepteert het een layer-optie:

page.AddBarcode({ type: 'code128', data: 'ROOM-204' }, [370, 340, 500, 384], {
  layer: branding,
  text: true, // draw the human-readable payload beneath the symbol
});

Veelvoorkomende problemen en oplossingen

Grafische elementen getekend met PageGraphics verschijnen niet op de pagina. Roept buffer aan tot apply() wordt aangeroepen — elke PageGraphics sequentie heeft een overeenkomstige apply() voordat de pagina wordt opgeslagen.

Een laag verschijnt nooit in het lagenpaneel van de viewer. Confirm AddLayer() werd aangeroepen via doc.OptionalContent, niet aangemaakt als een op zichzelf staand object — lagen moeten geregistreerd worden in de optionele inhoudconfiguratie van het document om weergegeven te worden.

Een afbeelding of barcode negeert de zichtbaarheids-schakelaar van een laag. Only AddImage(), AddBarcode(), en inhoud ingepakt in PageGraphics.BeginLayer() / EndLayer() koppelen aan een laag via /OC — de andere basale inhoud van een pagina (bijvoorbeeld platte tekst getekend zonder een laag-optie) wordt niet beïnvloed door een laag-schakelaar.

Page.AddImage() vervormt de afbeelding. rect stelt de geplaatste breedte en hoogte direct in — bereken deze eerst op basis van de eigen beeldverhouding van de bronafbeelding als de afbeelding niet mag worden uitgerekt.

Veelgestelde vragen

Kan een laag standaard verborgen zijn?

Ja — geef { visible: false } door aan OptionalContent.AddLayer().

Kan een laag onder een andere genest worden?

Ja — geef { parent: someLayer } door bij het aanroepen van AddLayer() om de nieuwe laag onder een bestaande te genesten in de /D /Order van het lagenpaneel.

Welke afbeeldingsformaten accepteert `Page.AddImage()`?

JPEG- en PNG-rasterbytes.

Ondersteunt tekenen met `PageGraphics` transparantie en gestreepte lijnen?

Ja — setOpacity(alpha) stelt fill/stroke alpha in en setDash(pattern, phase) stelt een dash-patroon in; beide zijn chainable zoals de andere PageGraphics setters.