Add image embedding example to README

Author: Hopding

README.md

@@ -43,6 +43,7 @@
   - [Document Creation](#document-creation)
   - [Document Modification](#document-modification)
   - [Copying Pages](#copying-pages)
+  - [Embed PNG and JPEG Images](#embed-png-and-jpeg-images)
   - [Embed Font and Measure Text](#embed-font-and-measure-text)
 - [Installation](#installation)
 - [Prior Art](#prior-art)
@@ -171,6 +172,48 @@ pdfDoc.insertPage(0, secondDonorPage)
 const pdfBytes = await pdfDoc.save()
 ```
 
+### Embed PNG and JPEG Images
+
+_This example produces [this PDF](assets/pdfs/examples/embed_png_and_jpeg_images.pdf)_ (when [this image](assets/images/cat_riding_unicorn.jpg) is used for the `jpgImageBytes` variable and [this image](assets/images/minions_banana_alpha.jpg) is used for the `pngImageBytes` variable).
+
+<!-- prettier-ignore -->
+```js
+import { PDFDocument } from 'pdf-lib'
+
+// These should be a Uint8Arrays.
+// This data can be obtained in a number of different ways.
+// If your running in a Node environment, you could use fs.readFile().
+// In the browser, you could make a fetch() call and use res.arrayBuffer().
+const jpgImageBytes = ...
+const pngImageBytes = ...
+
+const pdfDoc = await PDFDocument.create()
+
+const jpgImage = await pdfDoc.embedJpg(jpgImageBytes)
+const pngImage = await pdfDoc.embedPng(pngImageBytes)
+
+const jpgDims = jpgImage.scale(0.25)
+const pngDims = pngImage.scale(0.5)
+
+const page = pdfDoc.addPage()
+
+page.drawImage(jpgImage, {
+  x: page.getWidth() / 2 - jpgDims.width / 2,
+  y: page.getHeight() / 2 - jpgDims.height / 2,
+  width: jpgDims.width,
+  height: jpgDims.height,
+})
+
+page.drawImage(pngImage, {
+  x: page.getWidth() / 2 - pngDims.width / 2 + 75,
+  y: page.getHeight() / 2 - pngDims.height,
+  width: pngDims.width,
+  height: pngDims.height,
+})
+
+const pdfBytes = await pdfDoc.save()
+```
+
 ### Embed Font and Measure Text
 
 `pdf-lib` relies on a sister module to support embedding custom fonts: [`@pdf-lib/fontkit`](https://www.npmjs.com/package/@pdf-lib/fontkit). You must add the `@pdf-lib/fontkit` module to your project and register it using `pdfDoc.registerFontkit(...)` before embedding custom fonts.

assets/pdfs/examples/embed_png_and_jpeg_images.pdf

@@ -1,44 +1,38 @@
-import fontkit from '@pdf-lib/fontkit';
 import fs from 'fs';
-import { PDFDocument, rgb } from 'src/index';
+import { PDFDocument } from 'src/index';
 
 (async () => {
-  // This should be a Uint8Array.
+  // These should be a Uint8Arrays.
   // This data can be obtained in a number of different ways.
   // If your running in a Node environment, you could use fs.readFile().
   // In the browser, you could make a fetch() call and use res.arrayBuffer().
-  const fontBytes = fs.readFileSync('assets/fonts/ubuntu/Ubuntu-R.ttf');
+  const jpgImageBytes = fs.readFileSync('assets/images/cat_riding_unicorn.jpg');
+  const pngImageBytes = fs.readFileSync(
+    'assets/images/minions_banana_alpha.png',
+  );
 
   const pdfDoc = await PDFDocument.create();
 
-  pdfDoc.registerFontkit(fontkit);
+  const jpgImage = await pdfDoc.embedJpg(jpgImageBytes);
+  const pngImage = await pdfDoc.embedPng(pngImageBytes);
 
-  const customFont = await pdfDoc.embedFont(fontBytes);
+  const jpgDims = jpgImage.scale(0.25);
+  const pngDims = pngImage.scale(0.5);
 
   const page = pdfDoc.addPage();
 
-  const text = 'This is text in an embedded font!';
-  const textSize = 35;
-  const textWidth = customFont.widthOfTextAtSize(text, textSize);
-  const textHeight = customFont.heightAtSize(textSize);
-
-  // Draw text on page
-  page.drawText(text, {
-    x: 40,
-    y: 450,
-    size: textSize,
-    font: customFont,
-    color: rgb(0, 0.53, 0.71),
+  page.drawImage(jpgImage, {
+    x: page.getWidth() / 2 - jpgDims.width / 2,
+    y: page.getHeight() / 2 - jpgDims.height / 2,
+    width: jpgDims.width,
+    height: jpgDims.height,
   });
 
-  // Draw a box around the text
-  page.drawRectangle({
-    x: 40,
-    y: 450,
-    width: textWidth,
-    height: textHeight,
-    borderColor: rgb(1, 0, 0),
-    borderWidth: 1.5,
+  page.drawImage(pngImage, {
+    x: page.getWidth() / 2 - pngDims.width / 2 + 75,
+    y: page.getHeight() / 2 - pngDims.height,
+    width: pngDims.width,
+    height: pngDims.height,
   });
 
   const pdfBytes = await pdfDoc.save();