Aspose.PDF FOSS
TypeScript
Як працювати з зображеннями та графікою в TypeScript

Як працювати з зображеннями та графікою в TypeScript

У цьому посібнику показано, як розташовувати зображення та векторну графіку на сторінці PDF за допомогою Aspose.PDF FOSS для TypeScript. 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: Прив’язати зображення та графіку до шарів Optional-Content

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

Чи може один шар бути вкладеним під інший?

Так — передайте { parent: someLayer } під час виклику AddLayer(), щоб розмістити новий шар під існуючим у /D /Order панелі шарів.

Які формати зображень приймає Page.AddImage()?

JPEG і PNG растрові байти.

Чи підтримує малювання за допомогою PageGraphics прозорість та пунктирні лінії?

Так — setOpacity(alpha) встановлює альфа-канал заливки/контуру, а setDash(pattern, phase) задає шаблон пунктирної лінії; обидва можна ланцюжити, як інші PageGraphics сеттери.

Дивіться також

 Українська