TypeScript에서 이미지 및 그래픽 작업하기

이 가이드는 TypeScript용 Aspose.PDF FOSS와 함께 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

패키지를 설치한 후, 새로운 TypeScript 파일에서 Document 클래스를 임포트하여 설치를 확인하십시오 — 이 줄은 패키지가 설치되면 오류 없이 해결되어야 합니다:

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()는 apply()가 커밋할 때까지 그리기 호출을 버퍼링하는 PageGraphics을 반환합니다. 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을 생성합니다. 이를 AddImage()에 layer로 전달하거나, 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 설정자와 마찬가지로 체이닝이 가능합니다.