---
title: Extract Thumbnail Image from Affinity Photo and Affinity Design
---

Nextcloud doesn't have a support for thumbnail generation from Affinity Photo and Affinity Design. So I had to do it myself.

# Digging Binary

Glancing at `.afphoto` and `.afdesign` in Finder, I noticed that it has a QuickLook support and an ability to show the thumbnail image. So these files should have thumbnail image somewhere inside its binary.

I wrote a simple script to seek for thumbnail image from a binary and save it as `.png` file.

```js af.js
const fs = require("fs");

// png spec: https://www.w3.org/TR/PNG/
const PNG_SIG = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
const IEND_SIG = Buffer.from([73, 69, 78, 68]);

function extractThumbnail(buf) {
  const start = buf.indexOf(PNG_SIG);
  const end = buf.indexOf(IEND_SIG, start) + IEND_SIG.length * 2; // IEND + CRC
  return buf.subarray(start, end);
}

function generateThumbnail(input, output) {
  const buf = fs.readFileSync(input);
  const thumbBuf = extractThumbnail(buf);
  fs.writeFileSync(output, thumbBuf);
}

generateThumbnail(process.argv[2], process.argv[3] || "output.png");
```

That's right. This script just scrapes a binary file and extracts the portion of which starts with `PNG` signature and ends with `IEND`.

Now I can generate a thumbnail image from arbitrary `.afphoto` and `.afdesign` file. Let's move on delving into Nextcloud source code.

# Tweaking Nextcloud

I have a little experience in tweaking Nextcloud source code before, where I implemented thumbnail generator for PDFs, so it should be easier this time, hopefully.

![](afphoto.png)

Anyway, long story short, I got Nextcloud generates thumbnail images for Affinity files by implementing PreviewGenerator class.