You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: This section explains how to add and replace images in the EJ2 PDF document using Essential PDF. It supports both raster and vector images.
2
+
title: Working with Images | Syncfusion
3
+
description: This section explains how to add and replace images in the PDF document using Essential PDF. It supports both raster and vector images.
4
4
platform: document-processing
5
5
control: PDF
6
6
documentation: UG
7
7
domainurl: ##DomainURL##
8
8
---
9
9
10
-
# Working with EJ2 images using various options
10
+
# Working with images using various options
11
11
12
12
Essential<sup>®</sup> PDF supports both raster and vector images.
13
13
14
-
Images are supported through the `PdfImage`class, which is an abstract base class that provides the common functionality for `PdfBitmap` class.
14
+
Images are supported through the `PdfImage`class, which is an abstract base class that provides the common functionality for `PdfBitmap` class.
15
15
16
-
## Inserting an EJ2 image in a new document
16
+
## Inserting an image in a new document
17
17
18
18
The following raster images are supported in Essential<sup>®</sup> PDF.
19
19
@@ -30,44 +30,24 @@ The following raster images are supported in Essential<sup>®</sup> PDF.
30
30
This example demonstrates how to add an image to a PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and drawn at the specified coordinates on the page.
31
31
32
32
{% tabs %}
33
-
{% highlight ts tabtitle="index.ts" %}
33
+
{% highlight c# tabtitle="TypeScript" %}
34
34
35
-
// Create and render button
36
-
let button: Button = new Button();
37
-
button.appendTo('#normalbtn');
35
+
import { PdfDocument, PdfPage, PdfImage, PdfGraphics, PdfBitmap } from '@syncfusion/ej2-pdf';
38
36
39
-
// Handle click event
40
-
button.element.onclick = async () => {
41
-
console.log('Start PDF Creation');
42
-
createPdf();
43
-
};
44
-
45
-
// Function to create PDF
46
-
function createPdf() {
47
37
// Create a new PDF document
48
38
let document: PdfDocument = new PdfDocument();
49
-
// Add a new section to the document
50
-
let section: PdfSection = document.addSection();
51
-
// Add a page to the section
52
-
let page: PdfPage = section.addPage();
39
+
// Add a page
40
+
let page: PdfPage = document.addPage();
53
41
// Get graphics from the page
54
-
let graphics = page.graphics;
42
+
let graphics: PdfGraphics = page.graphics;
55
43
// Load the image
56
-
let image: PdfImage = new PdfBitmap('Image.jpg');
44
+
let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
57
45
// Draw the image.
58
-
image.draw(graphics, 0,0);
46
+
image.draw(graphics, {x: 10, y: 10});
59
47
// Save the document
60
48
document.save('Output.pdf');
61
49
// Close the document
62
50
document.destroy();
63
-
}
64
-
65
-
{% endhighlight %}
66
-
{% highlight html tabtitle="index.html" %}
67
-
68
-
<divclass="row">
69
-
<button id="normalbtn">Create PDF</button>
70
-
</div>
71
51
72
52
{% endhighlight %}
73
53
{% endtabs %}
@@ -77,94 +57,24 @@ function createPdf() {
77
57
This example demonstrates how to insert an image into an existing PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and rendered at the specified position on the selected page.
78
58
79
59
{% tabs %}
80
-
{% highlight ts tabtitle="index.ts" %}
81
-
82
-
// Create and render button
83
-
let button: Button = new Button();
84
-
button.appendTo('#normalbtn');
60
+
{% highlight c# tabtitle="TypeScript" %}
85
61
86
-
// Handle click event
87
-
button.element.onclick = async () => {
88
-
console.log('Start PDF Creation');
89
-
createPdf();
90
-
};
62
+
import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
91
63
92
-
// Function to create PDF
93
-
function createPdf() {
94
64
// Load an existing PDF document
95
-
let document: PdfDocument = new PdfDocument('input.pdf');
65
+
let document: PdfDocument = new PdfDocument(data, password);
96
66
// Access first page
97
67
let page: PdfPage = document.getPage(0);
98
68
// Get graphics from the page
99
-
let graphics = page.graphics;
100
-
// Load the image
101
-
let image: PdfImage = new PdfBitmap('Image.jpg');
102
-
// Draw the image.
103
-
image.draw(graphics, 0,0);
104
-
// Save the document
105
-
document.save('Output.pdf');
106
-
// Close the document
107
-
document.destroy();
108
-
}
109
-
110
-
{% endhighlight %}
111
-
{% highlight html tabtitle="index.html" %}
112
-
113
-
<divclass="row">
114
-
<button id="normalbtn">Create PDF</button>
115
-
</div>
116
-
117
-
{% endhighlight %}
118
-
{% endtabs %}
119
-
120
-
## Image Pagination
121
-
122
-
This example demonstrates how to enable image pagination in a PDF document using the `PdfLayoutFormat` class. By setting the `break` property to PdfLayoutBreakType.fitPage and the `layout` property to PdfLayoutType.paginate, the image is automatically split across multiple pages when it exceeds the page size.
123
-
124
-
{% tabs %}
125
-
{% highlight ts tabtitle="index.ts" %}
126
-
127
-
// Create and render button
128
-
let button: Button = new Button();
129
-
button.appendTo('#normalbtn');
130
-
131
-
// Handle click event
132
-
button.element.onclick = async () => {
133
-
console.log('Start PDF Creation');
134
-
createPdf();
135
-
};
136
-
137
-
// Function to create PDF
138
-
function createPdf() {
139
-
// Create a new PDF document
140
-
let document: PdfDocument = new PdfDocument();
141
-
// Add a new section to the document
142
-
let section: PdfSection = document.addSection();
143
-
// Add a page to the section
144
-
let page: PdfPage = section.addPage();
145
-
// Get graphics from the page
146
-
let graphics = page.graphics;
69
+
let graphics: PdfGraphics = page.graphics;
147
70
// Load the image
148
-
let image: PdfImage = new PdfBitmap('Image.jpg');
149
-
// Create a layout for drawing
150
-
let pageLayout: PdfLayoutFormat = new PdfLayoutFormat();
151
-
// Set the layout break type for drawing
152
-
pageLayout.break = PdfLayoutBreakType.fitPage;
153
-
pageLayout.Layout = PdfLayoutType.paginate;
71
+
let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
154
72
// Draw the image.
155
-
image.draw(graphics, 20, 20, pageLayout);
73
+
image.draw(graphics, {x: 10, y: 10});
156
74
// Save the document
157
75
document.save('Output.pdf');
158
76
// Close the document
159
77
document.destroy();
160
-
}
161
-
162
-
{% endhighlight %}
163
-
{% highlight html tabtitle="index.html" %}
164
-
165
-
<divclass="row">
166
-
<button id="normalbtn">Create PDF</button>
167
-
</div>
168
78
169
79
{% endhighlight %}
170
80
{% endtabs %}
@@ -174,49 +84,29 @@ function createPdf() {
174
84
This example demonstrates how to apply clipping and manage graphics state in a PDF document using the `PdfGraphics` class. The `save` and `restore` methods preserve the current graphics state, while the `setClip` method defines a clipping region to restrict drawing operations, ensuring precise control over rendering.
// Restore the graphics state to remove the clipping region
207
105
graphics.restore(state);
208
106
// Save the document
209
107
document.save('Output.pdf');
210
108
// Close the document
211
109
document.destroy();
212
-
}
213
-
214
-
{% endhighlight %}
215
-
{% highlight html tabtitle="index.html" %}
216
-
217
-
<divclass="row">
218
-
<button id="normalbtn">Create PDF</button>
219
-
</div>
220
110
221
111
{% endhighlight %}
222
112
{% endtabs %}
@@ -226,54 +116,34 @@ function createPdf() {
226
116
This example demonstrates how to apply transparency and rotation to an image in a PDF document using the `PdfGraphics` class. Transparency can be controlled through the graphics state, while rotation is applied by transforming the graphics context before drawing the image, enabling advanced visual effects in the document.
0 commit comments