Cách làm việc với hình ảnh và đồ họa trong TypeScript

Hướng dẫn này chỉ cách đặt hình ảnh và đồ họa vector lên một trang PDF bằng Aspose.PDF FOSS cho TypeScript. Page.AddImage() nhúng các byte raster, Page.Graphics() trả về một PageGraphics để vẽ hình dạng, và Document.OptionalContent nhóm chúng vào các lớp có thể bật/tắt. Yêu cầu Node.js 22 trở lên.

Hướng dẫn từng bước

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

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

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

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

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

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

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

Các vấn đề thường gặp và cách khắc phục

Đồ họa được vẽ bằng PageGraphics không hiển thị trên trang. Gọi bộ đệm cho đến khi apply() được gọi — mỗi PageGraphics chuỗi cần một phần tương ứng apply() trước khi trang được lưu.

Một lớp không bao giờ xuất hiện trong bảng điều khiển lớp của trình xem. Confirm AddLayer() được gọi qua doc.OptionalContent, không được tạo thành đối tượng độc lập — các lớp phải được đăng ký trong cấu hình nội dung tùy chọn của tài liệu để được liệt kê.

Một hình ảnh hoặc mã vạch sẽ bỏ qua việc bật/tắt hiển thị của lớp. Only AddImage(), AddBarcode(), và nội dung được bao bọc trong PageGraphics.BeginLayer() / EndLayer() liên kết với một lớp thông qua /OC — nội dung cơ bản khác của trang (ví dụ: văn bản thuần được vẽ mà không có tùy chọn lớp) không bị ảnh hưởng bởi bất kỳ việc bật/tắt lớp nào.

Page.AddImage() làm méo hình ảnh. rect đặt trực tiếp chiều rộng và chiều cao đã đặt — tính toán nó dựa trên tỷ lệ khung hình của hình ảnh nguồn nếu hình ảnh không nên bị kéo dãn.

Câu hỏi thường gặp

Một lớp có thể mặc định ẩn không?

Có — truyền { visible: false } cho OptionalContent.AddLayer().

Một lớp có thể lồng dưới lớp khác không?

Có — truyền { parent: someLayer } khi gọi AddLayer() để lồng lớp mới dưới một lớp hiện có trong /D /Order của bảng điều khiển lớp.

Định dạng ảnh nào mà Page.AddImage() chấp nhận?

Dữ liệu raster JPEG và PNG.

Việc vẽ với PageGraphics có hỗ trợ độ trong suốt và đường nét đứt không?

Có — setOpacity(alpha) đặt alpha cho fill/stroke và setDash(pattern, phase) đặt mẫu gạch; cả hai đều có thể xâu chuỗi giống như các bộ thiết lập PageGraphics khác.

Xem thêm

• Core API
• Installation
• FAQ
• API Reference
• Aspose.PDF — Enterprise Knowledge Base