Aspose.PDF FOSS
TypeScript
TypeScriptで画像とグラフィックを扱う方法

TypeScriptで画像とグラフィックを扱う方法

このガイドでは、Aspose.PDF FOSS for TypeScript を使用して PDF ページに画像やベクターグラフィックを配置する方法を示します。Page.AddImage() はラスターバイトを埋め込み、Page.Graphics() は形状描画用の PageGraphics を返し、Document.OptionalContent はそれらを切り替え可能なレイヤーにグループ化します。Node.js 22 以降が必要です。

ステップバイステップガイド

ステップ 1: パッケージをインストールする 

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

パッケージがインストールされたら、Document クラスを新しい TypeScript ファイルにインポートしてインストールを確認してください — この行はエラーなく解決するはずです:

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

ステップ 2: 必要なクラスをインポートする

インポート Document でファイルを開きます。AddImage()、Graphics()、および AddBarcode() は、返される Page インスタンスに直接呼び出されます：

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

ステップ 3: ラスタ画像を埋め込む

Page.AddImage(data, rect, opts) は JPEG または PNG バイトをバウンディング rect の内部に配置し、サイズに合わせてスケールします：

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: ベクターグラフィックを描画する

Page.Graphics() は PageGraphics を返し、apply() がコミットするまで描画呼び出しをバッファリングします。setStrokeColor()、setFillColor()、setLineWidth() と、rect()、circle()、drawLine() といったシェイプメソッドをチェーンし、最後に 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();

ステップ 5: 画像とグラフィックをオプショナルコンテンツレイヤーにバインドする

doc.OptionalContent.AddLayer(name, opts) はビューアのレイヤーパネルで切り替え可能な Layer を作成します。これを layer として AddImage() に渡すか、PageGraphics 呼び出しを 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 });

ステップ 6: バーコードを追加する

Page.AddBarcode(spec, rect, opts) がバーコードシンボルを描画します；spec.type がシンボロジーを選択し、spec.data がエンコードされたペイロードです。AddImage() と同様に、layer オプションを受け取ります：

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

一般的な問題と修正

で描画されたグラフィック PageGraphics ページに表示されません。 バッファを呼び出すまで apply() が呼び出されます — すべての PageGraphics シーケンスには対応する apply() ページが保存される前に。

レイヤーはビューアのレイヤーパネルに決して表示されません。 Confirm AddLayer() を介して呼び出されました doc.OptionalContent, 単独オブジェクトとして作成されません — レイヤーは文書のオプションコンテンツ構成に登録されて初めて一覧に表示されます。

画像またはバーコードはレイヤーの表示切替を無視します。 Only AddImage(), AddBarcode(), そしてコンテンツがラップされている PageGraphics.BeginLayer() / EndLayer() を介してレイヤーにバインドする /OC — ページの他の基本コンテンツ（例として、レイヤーオプションなしで描画されたプレーンテキスト）は、いかなるレイヤー切替の影響も受けません。

Page.AddImage() 画像が歪みます。 rect は配置された幅と高さを直接設定します — 画像を伸ばさない場合は、まずソース画像自身のアスペクト比から計算してください。

よくある質問

レイヤーをデフォルトで非表示にできますか？

はい — { visible: false } を OptionalContent.AddLayer() に渡します。

レイヤーを別のレイヤーの下に入れ子にできますか？

はい — AddLayer() を呼び出す際に { parent: someLayer } を渡すと、レイヤーパネルの /D /Order で既存のレイヤーの下に新しいレイヤーを入れ子にできます。

Page.AddImage() が受け付ける画像フォーマットは何ですか？

JPEG と PNG のラスターバイトです。

PageGraphics での描画は不透明度と破線をサポートしていますか？

はい — setOpacity(alpha) は塗り/線のアルファを設定し、setDash(pattern, phase) は破線パターンを設定します。どちらも他の PageGraphics セッターと同様にチェーン可能です。

参照

 日本語