Hur man arbetar med bilder och grafik i TypeScript

Den här guiden visar hur man placerar bilder och vektorgrafik på en PDF-sida med Aspose.PDF FOSS för TypeScript. Page.AddImage() bäddar in rasterbytes, Page.Graphics() returnerar en PageGraphics för formritning, och Document.OptionalContent grupperar dem i växlingsbara lager. Den kräver Node.js 22 eller senare.

Steg-för-steg-guide

Steg 1: Installera paketet

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

Verifiera installationen genom att importera Document-klassen i en ny TypeScript-fil — den här raden bör lösa sig utan fel när paketet är installerat:

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

Steg 2: Importera nödvändiga klasser

Importera Document för att öppna filen; AddImage(), Graphics() och AddBarcode() anropas direkt på de Page-instanser som den returnerar:

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

Steg 3: Bädda in en rasterbild

Page.AddImage(data, rect, opts) placerar JPEG- eller PNG-bytes i en begränsande rect, skalad för att passa:

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]);

Steg 4: Rita vektorgrafik

Page.Graphics() returnerar en PageGraphics som buffrar ritningsanrop tills apply() utför dem. Kedja setStrokeColor(), setFillColor(), setLineWidth() och formmetoder såsom rect(), circle() och drawLine(), sedan 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();

Steg 5: Binda bilder och grafik till valfria innehållslager

doc.OptionalContent.AddLayer(name, opts) skapar en Layer som kan växlas i en visares lagerpanel. Skicka den som layer till AddImage(), eller omge PageGraphics-anrop i 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 });

Steg 6: Lägg till en streckkod

Page.AddBarcode(spec, rect, opts) ritar en streckkodssymbol; spec.type väljer symbologin och spec.data är den kodade nyttolasten. Precis som AddImage() accepterar den ett layer-alternativ:

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

Vanliga problem och lösningar

Grafik som ritas med PageGraphics visas inte på sidan. Anropar bufferten tills apply() kallas — varje PageGraphics sekvens kräver ett matchande apply() innan sidan sparas.

Ett lager visas aldrig i tittarens lagerpanel. Confirm AddLayer() anropades via doc.OptionalContent, inte skapad som ett fristående objekt — lager måste registreras i dokumentets valfria innehållskonfiguration för att listas.

En bild eller streckkod ignorerar ett lagers synlighetsväxel. Only AddImage(), AddBarcode(), och innehåll insvept i PageGraphics.BeginLayer() / EndLayer() bindas till ett lager via /OC — en sidas övriga grundinnehåll (vanlig text ritad utan ett lageralternativ, till exempel) påverkas inte av någon lagerväxel.

Page.AddImage() förvränger bilden. rect sätter den placerade bredden och höjden direkt — beräkna den först från källbildens egna bildförhållande om bilden inte ska sträckas.

Vanliga frågor

Kan ett lager vara dolt som standard?

Ja — skicka { visible: false } till OptionalContent.AddLayer().

Kan ett lager ligga under ett annat?

Ja — skicka { parent: someLayer } när du anropar AddLayer() för att placera det nya lagret under ett befintligt i lagerpanelens /D /Order.

Vilka bildformat accepterar `Page.AddImage()`?

JPEG- och PNG-rasterbytes.

Stöder ritning med `PageGraphics` genomskinlighet och streckade linjer?

Ja — setOpacity(alpha) anger fyllnings-/stroketransparens och setDash(pattern, phase) anger ett streckmönster; båda kan kedjekallas som de andra PageGraphics-inställarna.