TypeScript में छवियों और ग्राफ़िक्स के साथ कैसे काम करें

यह गाइड दिखाता है कि Aspose.PDF FOSS for TypeScript के साथ PDF पेज पर छवियों और वेक्टर ग्राफ़िक्स को कैसे रखा जाए। 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
});

सामान्य समस्याएँ और समाधान

Graphics को … के साथ ड्रॉ किया गया PageGraphics page पर दिखाई नहीं देते। Calls buffer तक apply() को बुलाया जाता है — हर PageGraphics sequence को मिलते-जुलते की आवश्यकता है apply() page को सहेजे जाने से पहले।

एक layer viewer के layers panel में कभी नहीं दिखता। 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 सेटर्स की तरह चेन करने योग्य हैं।

यह भी देखें

• कोर API
• Installation
• FAQ
• API Reference
• Aspose.PDF — Enterprise Knowledge Base