aboutsummaryrefslogtreecommitdiff
path: root/content/posts/2020-03-27-create-placeholder-images-with-sharp.md
diff options
context:
space:
mode:
Diffstat (limited to 'content/posts/2020-03-27-create-placeholder-images-with-sharp.md')
-rw-r--r--content/posts/2020-03-27-create-placeholder-images-with-sharp.md46
1 files changed, 23 insertions, 23 deletions
diff --git a/content/posts/2020-03-27-create-placeholder-images-with-sharp.md b/content/posts/2020-03-27-create-placeholder-images-with-sharp.md
index f7dd362..ac4f053 100644
--- a/content/posts/2020-03-27-create-placeholder-images-with-sharp.md
+++ b/content/posts/2020-03-27-create-placeholder-images-with-sharp.md
@@ -5,14 +5,15 @@ date: 2020-03-27T12:00:00+02:00
5draft: false 5draft: false
6--- 6---
7 7
8I have been searching for a solution to pre-generate some placeholder images 8I have been searching for a solution to pre-generate some placeholder images for
9for image server I needed to develop that resizes images on S3. I though this 9image server I needed to develop that resizes images on S3. I though this would
10would be a 15min job and quickly found out how very mistaken I was. 10be a 15min job and quickly found out how very mistaken I was.
11 11
12Even though Node.js is not really the best way to do this kind of things 12Even though Node.js is not really the best way to do this kind of things (surely
13(surely something written in C or Rust or even Golang would be the correct way 13something written in C or Rust or even Golang would be the correct way to do
14to do this but we didn't need the speed in our case) I found an excellent 14this but we didn't need the speed in our case) I found an excellent library
15library [sharp - High performance Node.js image processing](https://github.com/lovell/sharp). 15[sharp - High performance Node.js image
16processing](https://github.com/lovell/sharp).
16 17
17Getting things running was a breeze. 18Getting things running was a breeze.
18 19
@@ -53,20 +54,20 @@ s3.putObject({
53All this code was wrapped inside a web service with some additional security 54All this code was wrapped inside a web service with some additional security
54checks and defensive coding to detect if key is missing on S3. 55checks and defensive coding to detect if key is missing on S3.
55 56
56And at that point I needed to return placeholder images as a response in case 57And at that point I needed to return placeholder images as a response in case
57key is missing or x,y are not allowed by the server etc. I could have created 58key is missing or x,y are not allowed by the server etc. I could have created
58PNG in Gimp and just serve them but I wanted to respect aspect ratio and I 59PNG in Gimp and just serve them but I wanted to respect aspect ratio and I
59didn't want to return some mangled images. 60didn't want to return some mangled images.
60 61
61> Main problem with finding a clean solution I could copy and paste and change 62> Main problem with finding a clean solution I could copy and paste and change a
62a bit was a task. API is changing constantly and there weren't clear examples 63> bit was a task. API is changing constantly and there weren't clear examples or
63or I was unable to find them. 64> I was unable to find them.
64 65
65## Generating placeholder images using SVG 66## Generating placeholder images using SVG
66 67
67What I ended up was using SVG to generate text and created image with sharp and 68What I ended up was using SVG to generate text and created image with sharp and
68used composition to combine both layers. Response returned by this function is 69used composition to combine both layers. Response returned by this function is a
69a buffer you can use to either upload to S3 or save to local file. 70buffer you can use to either upload to S3 or save to local file.
70 71
71```js 72```js
72const generatePlaceholderImageWithText = async (width, height, message) => { 73const generatePlaceholderImageWithText = async (width, height, message) => {
@@ -91,11 +92,10 @@ const generatePlaceholderImageWithText = async (width, height, message) => {
91} 92}
92``` 93```
93 94
94That is about it. Nothing more to it. You can change the color of the image by 95That is about it. Nothing more to it. You can change the color of the image by
95changing `background` and if you want to change text styling you can adapt 96changing `background` and if you want to change text styling you can adapt SVG
96SVG to your needs. 97to your needs.
97
98> Also be careful about the length of the text. This function positions text
99> at the center and adds `20px` padding on all sides. If text is longer than
100> the image it will get cut.
101 98
99> Also be careful about the length of the text. This function positions text at
100> the center and adds `20px` padding on all sides. If text is longer than the
101> image it will get cut.