Jak pracovat s obrázky a grafikou v TypeScript

Tento průvodce ukazuje, jak umístit obrázky a vektorovou grafiku na stránku PDF pomocí Aspose.PDF FOSS pro TypeScript. Page.AddImage() vkládá rastrová data, Page.Graphics() vrací PageGraphics pro kreslení tvarů a Document.OptionalContent seskupuje obojí do přepínatelných vrstev. Vyžaduje Node.js 22 nebo novější.

Průvodce krok za krokem

Krok 1: Nainstalujte balíček

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

Ověřte instalaci importováním třídy Document v novém souboru TypeScript — tento řádek by měl být bez chyb, jakmile je balíček nainstalován:

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

Krok 2: Importujte požadované třídy

Importujte Document pro otevření souboru; AddImage(), Graphics() a AddBarcode() jsou volány přímo na instancích Page, které vrací:

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

Krok 3: Vložit rastrový obrázek

Page.AddImage(data, rect, opts) umisťuje JPEG nebo PNG bajty do ohraničujícího rect, přizpůsobené velikosti:

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

Krok 4: Nakreslit vektorovou grafiku

Page.Graphics() vrací PageGraphics, který ukládá volání kreslení, dokud je apply() neprovede. Spojte setStrokeColor(), setFillColor(), setLineWidth() a metody tvarů, jako jsou rect(), circle() a drawLine(), poté 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();

Krok 5: Svázat obrázky a grafiku s vrstvami volitelného obsahu

doc.OptionalContent.AddLayer(name, opts) vytváří Layer, který lze přepínat v panelu vrstev prohlížeče. Předávejte jej jako layer do AddImage(), nebo obalte volání PageGraphics do 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 });

Krok 6: Přidat čárový kód

Page.AddBarcode(spec, rect, opts) vykreslí symbol čárového kódu; spec.type vybírá symbologii a spec.data je zakódované zatížení. Stejně jako AddImage() přijímá volbu layer:

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

Běžné problémy a opravy

Grafika vykreslená pomocí PageGraphics se na stránce neobjevují. Volá buffer až do apply() je voláno — každé PageGraphics sekvence potřebuje odpovídající apply() před uložením stránky.

Vrstva se nikdy neobjeví v panelu vrstev prohlížeče. Confirm AddLayer() byl volán přes doc.OptionalContent, ne vytvořeny jako samostatný objekt — vrstvy musí být zaregistrovány v konfiguraci volitelného obsahu dokumentu, aby byly uvedeny.

Obraz nebo čárový kód ignoruje přepínač viditelnosti vrstvy. Only AddImage(), AddBarcode(), a obsah zabalený v PageGraphics.BeginLayer() / EndLayer() sváže s vrstvou pomocí /OC — ostatní základní obsah stránky (například obyčejný text vykreslený bez možnosti vrstvy) není ovlivněn žádným přepínačem vrstvy.

Page.AddImage() zkresluje obrázek. rect nastaví umístěnou šířku a výšku přímo — nejprve ji vypočítejte z poměru stran zdrojového obrázku, pokud se obrázek nemá roztahovat.

Často kladené otázky

Může být vrstva ve výchozím nastavení skrytá?

Ano — předávejte { visible: false } do OptionalContent.AddLayer().

Může se jedna vrstva vnořit pod jinou?

Ano — předávejte { parent: someLayer } při volání AddLayer(), aby se nová vrstva vnořila pod existující ve /D /Order panelu vrstev.

Jaké formáty obrázků `Page.AddImage()` akceptuje?

JPEG a PNG rastrové bajty.

Podporuje kreslení s `PageGraphics` průhlednost a čárkované čáry?

Ano — setOpacity(alpha) nastavuje alfa hodnotu výplně/čáry a setDash(pattern, phase) nastavuje vzor čárkování; oba jsou řetězitelní jako ostatní PageGraphics nastaviteli.