mirror of
https://github.com/foliojs/pdfkit.git
synced 2026-01-25 16:06:44 +00:00
53 lines
5.7 KiB
HTML
53 lines
5.7 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Images in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/paper_sizes.html">Paper Sizes</a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a class="selected" href="/docs/images.html">Images </a></li><li><a href="/docs/outline.html">Outlines </a></li><li><a href="/docs/annotations.html">Annotations </a></li><li><a href="/docs/forms.html">Forms </a></li><li><a href="/docs/destinations.html">Destinations</a></li><li><a href="/docs/attachments.html">Attachments </a></li><li><a href="/docs/accessibility.html">Accessibility</a></li><li><a href="/docs/table.html">Tables </a></li><li><a href="/docs/you_made_it.html">You made it!</a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/examples/kitchen-sink.pdf">Example PDF</a></li><li><a href="/examples/browserify/browser.html">Interactive Browser Demo</a></li><li><a href="http://github.com/foliojs/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="images_in_pdfkit">Images in PDFKit</h1>
|
|
|
|
<p>Adding images to PDFKit documents is an easy task. Just pass an image path, buffer, or data uri with base64 encoded data to
|
|
the <code>image</code> method along with some optional arguments. PDFKit supports the
|
|
JPEG and PNG formats. If an X and Y position are not provided, the image is
|
|
rendered at the current point in the text flow (below the last line of text).
|
|
Otherwise, it is positioned absolutely at the specified point. The image will
|
|
be scaled according to the following options.</p>
|
|
|
|
<ul><li>Neither <code>width</code> or <code>height</code> provided - image is rendered at full size</li><li><code>width</code> provided but not <code>height</code> - image is scaled proportionally to fit in the provided <code>width</code></li><li><code>height</code> provided but not <code>width</code> - image is scaled proportionally to fit in the provided <code>height</code></li><li>Both <code>width</code> and <code>height</code> provided - image is stretched to the dimensions provided</li><li><code>scale</code> factor provided - image is scaled proportionally by the provided scale factor</li><li><code>fit</code> array provided - image is scaled proportionally to fit within the passed width and height</li><li><code>cover</code> array provided - image is scaled proportionally to completely cover the rectangle defined by the passed width and height</li><li><code>link</code> - a URL to link this image to (shortcut to create an annotation)</li><li><code>goTo</code> - go to anchor (shortcut to create an annotation)</li><li><code>destination</code> - create anchor to this image</li><li><code>ignoreOrientation</code> - (true/false) ignore JPEG EXIF orientation. By default, images with JPEG EXIF orientation are properly rotated and/or flipped. Defaults to <code>false</code>, unless <code>ignoreOrientation</code> option set to <code>true</code> when creating the <code>PDFDocument</code> object (e.g. <code>new PDFDocument({ignoreOrientation: true})</code>)</li></ul>
|
|
|
|
<p>When a <code>fit</code> or <code>cover</code> array is provided, PDFKit accepts these additional options:</p>
|
|
|
|
<ul><li><code>align</code> - horizontally align the image, the possible values are <code>'left'</code>, <code>'center'</code> and <code>'right'</code></li><li><code>valign</code> - vertically align the image, the possible values are <code>'top'</code>, <code>'center'</code> and <code>'bottom'</code></li></ul>
|
|
|
|
<p>Here is an example showing some of these options.</p>
|
|
|
|
<pre><code>// Scale proprotionally to the specified width
|
|
doc.image('images/test.jpeg', 0, 15, {width: 300})
|
|
.text('Proportional to width', 0, 0);
|
|
|
|
// Fit the image within the dimensions
|
|
doc.image('images/test.jpeg', 320, 15, {fit: [100, 100]})
|
|
.rect(320, 15, 100, 100)
|
|
.stroke()
|
|
.text('Fit', 320, 0);
|
|
|
|
// Stretch the image
|
|
doc.image('images/test.jpeg', 320, 145, {width: 200, height: 100})
|
|
.text('Stretch', 320, 130);
|
|
|
|
// Scale the image
|
|
doc.image('images/test.jpeg', 320, 280, {scale: 0.25})
|
|
.text('Scale', 320, 265);
|
|
|
|
// Fit the image in the dimensions, and center it both horizontally and vertically
|
|
doc.image('images/test.jpeg', 430, 15, {fit: [100, 100], align: 'center', valign: 'center'})
|
|
.rect(430, 15, 100, 100).stroke()
|
|
.text('Centered', 430, 0);</code></pre>
|
|
|
|
<hr/>
|
|
|
|
<p>This example produces the following output:</p>
|
|
|
|
<p><img src="img/15.png"/></p>
|
|
|
|
<p>That is all there is to adding images to your PDF documents with PDFKit. Now
|
|
let's look at adding outlines.</p><nav><a class="previous" href="/docs/text.html">Previous</a><a class="next" href="/docs/outline.html">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-48340245-1', 'pdfkit.org');
|
|
ga('send', 'pageview');</script></body></html> |