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