Cum să lucrați cu imagini și grafică în TypeScript

Acest ghid arată cum să plasezi imagini și grafice vectoriale pe o pagină PDF cu Aspose.PDF FOSS pentru TypeScript. Page.AddImage() încorporează octeți raster, Page.Graphics() returnează un PageGraphics pentru desenarea formelor și Document.OptionalContent grupează ambele în straturi comutabile. Necesită Node.js 22 sau o versiune ulterioară.

Ghid pas cu pas

Pasul 1: Instalează pachetul

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

Verifică instalarea importând clasa Document într-un nou fișier TypeScript — această linie ar trebui să se rezolve fără erori odată ce pachetul este instalat:

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

Pasul 2: Importă clasele necesare

Importă Document pentru a deschide fișierul; AddImage(), Graphics() și AddBarcode() sunt apelate direct pe instanțele Page pe care le returnează:

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

Pasul 3: Încorporează o imagine raster

Page.AddImage(data, rect, opts) plasează octeți JPEG sau PNG într-un rect de delimitare, redimensionați pentru a se potrivi:

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

Pasul 4: Desenează grafică vectorială

Page.Graphics() returnează un PageGraphics care memorează în buffer apelurile de desenare până când apply() le confirmă. Înlănțuiește setStrokeColor(), setFillColor(), setLineWidth() și metodele de formă precum rect(), circle() și drawLine(), apoi 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();

Pasul 5: Leagă imagini și grafică de straturi de conținut opțional

doc.OptionalContent.AddLayer(name, opts) creează un Layer care poate fi comutat în panoul de straturi al unui vizualizator. Transmite-l ca layer către AddImage(), sau înfășoară apelurile PageGraphics în 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 });

Pasul 6: Adaugă un cod de bare

Page.AddBarcode(spec, rect, opts) desenează un simbol de cod de bare; spec.type selectează simbolistica și spec.data este sarcina utilă codificată. Ca și AddImage(), acceptă o opțiune layer:

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

Probleme comune și remedii

Graficele desenate cu PageGraphics nu apar pe pagină. Apelează buffer până când apply() este apelat — fiecare PageGraphics secvență necesită o potrivire apply() înainte ca pagina să fie salvată.

Un strat nu apare niciodată în panoul de straturi al vizualizatorului. Confirm AddLayer() a fost apelat prin doc.OptionalContent, nu este creat ca un obiect independent — straturile trebuie înregistrate în configurația de conținut opțional a documentului pentru a fi listate.

O imagine sau un cod de bare ignoră comutarea vizibilității unui strat. Only AddImage(), AddBarcode(), și conținutul învelit în PageGraphics.BeginLayer() / EndLayer() se leagă de un strat prin /OC — celălalt conținut de bază al unei pagini (text simplu desenat fără opțiune de strat, de exemplu) nu este afectat de niciun comutator de strat.

Page.AddImage() deformează imaginea. rect setează lățimea și înălțimea plasate direct — calculează-le mai întâi din raportul de aspect al imaginii sursă dacă imaginea nu trebuie să se întindă.

Întrebări frecvente

Poate un strat să fie implicit ascuns?

Da — transmite { visible: false } către OptionalContent.AddLayer().

Poate un strat să fie imbricat sub altul?

Da — transmite { parent: someLayer } când apelezi AddLayer() pentru a imbrica noul strat sub unul existent în /D /Order din panoul de straturi.

Ce formate de imagine acceptă `Page.AddImage()`?

Octeți raster JPEG și PNG.

Desenarea cu `PageGraphics` suportă opacitate și linii întrerupte?

Da — setOpacity(alpha) setează alfa pentru umplere/contur și setDash(pattern, phase) setează un model de liniuță; ambele pot fi înlănțuite ca ceilalți setatori PageGraphics.