Cara Bekerja dengan Gambar dan Grafik di TypeScript

Panduan ini menunjukkan cara menempatkan gambar dan grafik vektor pada halaman PDF dengan Aspose.PDF FOSS untuk TypeScript. Page.AddImage() menyematkan byte raster, Page.Graphics() mengembalikan sebuah PageGraphics untuk menggambar bentuk, dan Document.OptionalContent mengelompokkan keduanya ke dalam lapisan yang dapat diaktifkan. Diperlukan Node.js 22 atau lebih baru.

Panduan Langkah demi Langkah

Langkah 1: Instal Paket

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

Verifikasi instalasi dengan mengimpor kelas Document dalam file TypeScript baru — baris ini harus terselesaikan tanpa error setelah paket diinstal:

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

Langkah 2: Impor Kelas yang Diperlukan

Impor Document untuk membuka file; AddImage(), Graphics(), dan AddBarcode() dipanggil langsung pada instance Page yang dikembalikannya:

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

Langkah 3: Sisipkan Gambar Raster

Page.AddImage(data, rect, opts) menempatkan byte JPEG atau PNG di dalam rect pembatas, yang diskalakan agar pas:

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

Langkah 4: Gambar Grafik Vektor

Page.Graphics() mengembalikan PageGraphics yang menampung panggilan menggambar hingga apply() mengkomitnya. Rantai setStrokeColor(), setFillColor(), setLineWidth(), dan metode bentuk seperti rect(), circle(), dan drawLine(), kemudian 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();

Langkah 5: Kaitkan Gambar dan Grafik ke Lapisan Konten Opsional

doc.OptionalContent.AddLayer(name, opts) membuat Layer yang dapat diaktifkan/nonaktifkan di panel lapisan penampil. Lewatkan sebagai layer ke AddImage(), atau bungkus panggilan PageGraphics dalam 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 });

Langkah 6: Tambahkan Barcode

Page.AddBarcode(spec, rect, opts) menggambar simbol barcode; spec.type memilih simbolologi dan spec.data adalah payload yang di-encode. Seperti AddImage(), ia menerima opsi layer:

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

Masalah Umum dan Solusi

Grafik yang digambar dengan PageGraphics tidak muncul di halaman. Memanggil buffer sampai apply() dipanggil — setiap PageGraphics urutan membutuhkan pasangan apply() sebelum halaman disimpan.

Sebuah lapisan tidak pernah muncul di panel lapisan penampil. Confirm AddLayer() dipanggil melalui doc.OptionalContent, tidak dibuat sebagai objek mandiri — lapisan harus didaftarkan pada konfigurasi konten opsional dokumen agar terdaftar.

Sebuah gambar atau kode batang mengabaikan saklar visibilitas lapisan. Only AddImage(), AddBarcode(), dan konten yang dibungkus dalam PageGraphics.BeginLayer() / EndLayer() mengikat ke lapisan melalui /OC — konten dasar lain pada halaman (teks biasa yang digambar tanpa opsi lapisan, misalnya) tidak terpengaruh oleh saklar lapisan apa pun.

Page.AddImage() mendistorsi gambar. rect menetapkan lebar dan tinggi yang ditempatkan secara langsung — hitung terlebih dahulu dari rasio aspek gambar sumber jika gambar tidak boleh meregang.

Pertanyaan yang Sering Diajukan

Apakah sebuah layer dapat default tersembunyi?

Ya — berikan { visible: false } ke OptionalContent.AddLayer().

Apakah satu layer dapat menumpuk di bawah layer lain?

Ya — berikan { parent: someLayer } saat memanggil AddLayer() untuk menumpuk layer baru di bawah layer yang sudah ada di /D /Order panel lapisan.

Format gambar apa yang diterima `Page.AddImage()`?

Byte raster JPEG dan PNG.

Apakah menggambar dengan `PageGraphics` mendukung opasitas dan garis putus-putus?

Ya — setOpacity(alpha) mengatur alpha isi/garis, dan setDash(pattern, phase) mengatur pola dash; keduanya dapat di-chain seperti setter PageGraphics lainnya.