From e07ab67bf95ea7e65828e373c731b6cdf984a7de Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Sun, 24 Jan 2021 01:42:03 +0100 Subject: Moved to altenator and DO --- ...0-03-27-create-placeholder-images-with-sharp.md | 83 ---------------------- 1 file changed, 83 deletions(-) delete mode 100644 content/2020-03-27-create-placeholder-images-with-sharp.md (limited to 'content/2020-03-27-create-placeholder-images-with-sharp.md') diff --git a/content/2020-03-27-create-placeholder-images-with-sharp.md b/content/2020-03-27-create-placeholder-images-with-sharp.md deleted file mode 100644 index e53a7de..0000000 --- a/content/2020-03-27-create-placeholder-images-with-sharp.md +++ /dev/null @@ -1,83 +0,0 @@ -~ title: Create placeholder images with sharp Node.js image processing library -~ description: Create placeholder images with sharp Node.js image processing library -~ slug: /create-placeholder-images-with-sharp.html -~ date: 2020-03-27 -~ template: post -~ hide: 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