From 2417a6b7603524dc5cd30d29b153f91024b9443d Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Wed, 1 Nov 2023 22:54:27 +0100 Subject: Move to Jekyll --- ...0-03-27-create-placeholder-images-with-sharp.md | 102 --------------------- 1 file changed, 102 deletions(-) delete mode 100644 content/posts/2020-03-27-create-placeholder-images-with-sharp.md (limited to 'content/posts/2020-03-27-create-placeholder-images-with-sharp.md') 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 deleted file mode 100644 index 1c2b042..0000000 --- a/content/posts/2020-03-27-create-placeholder-images-with-sharp.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Create placeholder images with sharp Node.js image processing library -url: create-placeholder-images-with-sharp.html -date: 2020-03-27T12:00:00+02:00 -type: post -draft: false ---- - -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. - -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). - -Getting things running was a breeze. - -## Fetch image from S3 and save resized - -```js -const sharp = require('sharp'); -const aws = require('aws-sdk'); - -const x,y = 100; -const s3 = new aws.S3({}); - -aws.config.update({ - secretAccessKey: 'secretAccessKey', - accessKeyId: 'accessKeyId', - region: 'region' -}); - -const originalImage = await s3.getObject({ - Bucket: 'some-bucket-name', - Key: 'image.jpg', -}).promise(); - -const resizedImage = await sharp(originalImage.Body) - .resize(x, y) - .jpeg({ progressive: true }) - .toBuffer(); - -s3.putObject({ - Bucket: 'some-bucket-name', - Key: `optimized/${x}x${y}/image.jpg`, - Body: resizedImage, - ContentType: 'image/jpeg', - ACL: 'public-read' -}).promise(); -``` - -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. - -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. - -> 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. - -## Generating placeholder images using SVG - -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. - -```js -const generatePlaceholderImageWithText = async (width, height, message) => { - const overlay = ` - ${message} - `; - - return await sharp({ - create: { - width: width, - height: height, - channels: 4, - background: { r: 230, g: 230, b: 230, alpha: 1 } - } - }) - .composite([{ - input: Buffer.from(overlay), - gravity: 'center', - }]) - .jpeg() - .toBuffer(); -} -``` - -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. - -> 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. -- cgit v1.2.3