TypeScript'te Görüntüler ve Grafiklerle Çalışma

Bu rehber, Aspose.PDF FOSS for TypeScript kullanarak bir PDF sayfasına görseller ve vektör grafikleri nasıl yerleştirileceğini gösterir. Page.AddImage() raster baytlarını gömer, Page.Graphics() şekil çizimi için bir PageGraphics döndürür ve Document.OptionalContent her ikisini de değiştirilebilir katmanlarda gruplar. Node.js 22 veya daha yenisi gerekir.

Adım Adım Rehber

Adım 1: Paketi Yükleyin

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

Kurulumu, yeni bir TypeScript dosyasında Document sınıfını içe aktararak doğrulayın — paket yüklendiğinde bu satır hatasız bir şekilde çözümlenmelidir:

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

Adım 2: Gerekli Sınıfları İçe Aktarın

Dosyayı açmak için Document içe aktarın; AddImage(), Graphics() ve AddBarcode(), döndürdüğü Page örnekleri üzerinde doğrudan çağrılır:

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

Adım 3: Bir Raster Görüntüsü Göm

Page.AddImage(data, rect, opts), JPEG veya PNG baytlarını sınırlayıcı bir rect içine yerleştirir, sığacak şekilde ölçeklendirir:

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

Adım 4: Vektör Grafiklerini Çizin

Page.Graphics(), apply() onaylayana kadar çizim çağrılarını tamponlayan bir PageGraphics döndürür. setStrokeColor(), setFillColor(), setLineWidth() ve rect(), circle(), drawLine() gibi şekil metodlarını zincirleyin, ardından 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();

Adım 5: Görüntüleri ve Grafikleri İsteğe Bağlı İçerik Katmanlarına Bağla

doc.OptionalContent.AddLayer(name, opts), görüntüleyicinin katmanlar panelinde açılıp kapatılabilen bir Layer oluşturur. Bunu AddImage() içine layer olarak geçirin veya PageGraphics çağrılarını BeginLayer() / EndLayer() içinde sarın:

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

Adım 6: Bir Barkod Ekleyin

Page.AddBarcode(spec, rect, opts) bir barkod simgesi çizer; spec.type sembolojiyi seçer ve spec.data kodlanmış yükü olur. AddImage() gibi, bir layer seçeneğini kabul eder:

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

Yaygın Sorunlar ve Çözümler

Şununla çizilen grafikler PageGraphics sayfada görünmüyor. Çağrılar tamponu … kadar apply() çağrıldığında — her PageGraphics dizinin bir eşleşmesi gerekir apply() sayfa kaydedilmeden önce.

Bir katman, görüntüleyicinin katmanlar panelinde hiç görünmez. Confirm AddLayer() şu yoluyla çağrıldı doc.OptionalContent, bağımsız bir nesne olarak oluşturulmadı — katmanların belgelerin isteğe bağlı içerik yapılandırmasına kaydedilmesi gerekir listelenebilmesi için.

Bir görüntü veya barkod, katmanın görünürlük geçişini görmez. Only AddImage(), AddBarcode(), ve … içinde sarılmış içerik PageGraphics.BeginLayer() / EndLayer() … aracılığıyla bir katmana bağlan /OC — bir sayfanın diğer temel içeriği (örneğin, katman seçeneği olmadan çizilen düz metin) herhangi bir katman geçişinden etkilenmez.

Page.AddImage() görüntüyü bozar. rect yerleştirilen genişlik ve yüksekliği doğrudan ayarlar — görüntünün germemesi gerekiyorsa önce kaynak görüntünün kendi en-boy oranından hesaplayın.

Sıkça Sorulan Sorular

Bir katman varsayılan olarak gizli olabilir mi?

Evet — { visible: false }‘ı OptionalContent.AddLayer()‘e geçirin.

Bir katman başka bir katmanın altında iç içe yer alabilir mi?

Evet — AddLayer()‘i çağırırken { parent: someLayer }‘ı geçirerek, yeni katmanı katmanlar panelinin /D /Order‘sindeki mevcut bir katmanın altına iç içe yerleştirebilirsiniz.

`Page.AddImage()` hangi görüntü formatlarını kabul eder?

JPEG ve PNG raster baytları.

`PageGraphics` ile çizim, opaklık ve kesikli çizgileri destekliyor mu?

Evet — setOpacity(alpha) doldurma/çizgi alfa değerini ayarlar ve setDash(pattern, phase) kesikli bir desen ayarlar; ikisi de diğer PageGraphics ayarlayıcılar gibi zincirlenebilir.