วิธีทำงานกับภาพและกราฟิกใน TypeScript

คู่มือนี้แสดงวิธีวางรูปภาพและกราฟิกเวกเตอร์บนหน้า PDF ด้วย Aspose.PDF FOSS สำหรับ TypeScript. Page.AddImage() ฝังไบต์แบบแรสเตอร์, Page.Graphics() ส่งคืน PageGraphics สำหรับการวาดรูปทรง, และ Document.OptionalContent จัดกลุ่มทั้งสองเป็นชั้นที่สามารถสลับเปิดปิดได้. จำเป็นต้องใช้ Node.js 22 หรือใหม่กว่า.

คู่มือแบบขั้นตอนต่อขั้นตอน

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

ปัญหาทั่วไปและวิธีแก้ไข

กราฟิกที่วาดด้วย 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) กำหนดค่าอัลฟ่าของ fill/stroke และ setDash(pattern, phase) กำหนดรูปแบบเส้นประ; ทั้งสองสามารถเชนต่อได้เช่นเดียวกับตัวตั้งค่า PageGraphics อื่น ๆ.

ดูเพิ่มเติม

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