Hogyan dolgozzunk képekkel és grafikákkal TypeScript-ben

Ez az útmutató bemutatja, hogyan helyezhetők képek és vektorgrafikák egy PDF oldalra a Aspose.PDF FOSS segítségével a TypeScript számára. A Page.AddImage() beágyaz raszteres bájtokat, a Page.Graphics() egy PageGraphics-t ad vissza alakzatrajzoláshoz, és a Document.OptionalContent ezeket egy kapcsoltható rétegekbe csoportosítja. Node.js 22 vagy újabb szükséges.

Lépésről lépésre útmutató

1. lépés: A csomag telepítése

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

Ellenőrizze a telepítést a Document osztály importálásával egy új TypeScript fájlban — ennek a sornak hibamentesen kell feloldódnia, miután a csomag telepítve van:

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

2. lépés: Szükséges osztályok importálása

Importálja a Document elemet a fájl megnyitásához; a AddImage(), Graphics() és AddBarcode() közvetlenül a visszaadott Page példányokon hívódnak:

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

3. lépés: Rasterkép beágyazása

Page.AddImage(data, rect, opts) JPEG vagy PNG bájtokat helyez egy körülhatároló rect belsejébe, a méretezéshez igazítva:

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

4. lépés: Vektorgrafika rajzolása

Page.Graphics() egy PageGraphics objektumot ad vissza, amely a rajzolási hívásokat puffereli, amíg a apply() el nem küldi őket. Láncolja a setStrokeColor(), setFillColor(), setLineWidth() és alakzatmetódusokat, például a rect(), circle() és drawLine(), majd a stroke() / fill() / fillStroke() műveleteket:

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

5. lépés: Képek és grafika kötése opcionális tartalmi rétegekhez

doc.OptionalContent.AddLayer(name, opts) egy Layer elemet hoz létre, amely a néző rétegpanelekben be- és kikapcsolható. Adja át layer paraméterként a AddImage() számára, vagy csomagolja a PageGraphics hívásokat a BeginLayer() / EndLayer() segítségével:

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

6. lépés: Vonalkód hozzáadása

Page.AddBarcode(spec, rect, opts) egy vonalkód szimbólumot rajzol; spec.type kiválasztja a szimbológiát, és spec.data a kódolt payload. A AddImage()-hoz hasonlóan egy layer opciót fogad el:

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

Általános problémák és megoldások

A következővel rajzolt grafikák PageGraphics nem jelennek meg az oldalon. Puffert hív, amíg apply() hívásra kerül — minden PageGraphics sorozatnak szüksége van egy megfelelő apply() mielőtt az oldal mentésre kerül.

Egy réteg soha nem jelenik meg a megjelenítő rétegek paneljén. Confirm AddLayer() hívásra került a(z) doc.OptionalContent, nem önálló objektumként hozva létre — a rétegeket a dokumentum opcionális tartalom konfigurációjában kell regisztrálni, hogy megjelenjenek a listában.

A kép vagy vonalkód figyelmen kívül hagyja egy réteg láthatóságának kapcsolóját. Only AddImage(), AddBarcode(), és a tartalom, amely be van csomagolva PageGraphics.BeginLayer() / EndLayer() kapcsolódik egy réteghez a /OC — az oldal egyéb alap tartalma (például réteg opció nélkül megrajzolt egyszerű szöveg) nem érintett semmilyen rétegkapcsoló által.

Page.AddImage() torzítja a képet. rect közvetlenül beállítja a helyezett szélességet és magasságot — ha a képet nem szabad nyújtani, először számold ki a forráskép saját képarányából.

Gyakran Ismételt Kérdések

Lehet egy réteg alapértelmezetten rejtett?

Igen — adja át { visible: false } a OptionalContent.AddLayer()nek.

Lehet egy réteg egy másik alá ágyazva?

Igen — adja át { parent: someLayer } a AddLayer() hívásakor, hogy az új réteg egy meglévő alatt legyen a rétegek paneljének /D /Order részében.

Milyen képformátumokat fogad el a `Page.AddImage()`?

JPEG és PNG raszter bájtok.

Támogatja-e a `PageGraphics` használatával a rajzolás átlátszóságát és a szaggatott vonalakat?

Igen — a setOpacity(alpha) beállítja a kitöltés/vonal alfa értékét, a setDash(pattern, phase) egy szaggatott mintát állít be; mindkettő láncolható, akárcsak a többi PageGraphics beállító.