From 8dee77e155217fd62f4bd961e51959e4f1b844ec Mon Sep 17 00:00:00 2001 From: Konstantin Tarkus Date: Fri, 25 Sep 2020 14:10:31 +0300 Subject: [PATCH] Add "Resizing and cropping images" to README --- README.md | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 193fbf4..6519251 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,35 @@ module.exports.img = createHandler({ Deploy it to GCP using Node.js v12+ runtime and configure a CDN on top of it. +## Resizing and cropping images + +You can resize and crop images in order to match the graphic design of your web +site or mobile application. Whether images are uploaded in your server-side code +or by your users, the original hi-res images are stored in the cloud for further +processing and management. You can then dynamically create multiple resized, +cropped and manipulated images on-the-fly and deliver them via dynamic URLs. + +To change the size of a image, use the `width` and `height` parameters (`w` and +`h` in URLs) to assign new values. You can resize the image by using both the +width and height parameters or with only one of them: the other dimension is +automatically updated to maintain the aspect ratio. + +Examples of resizing the uploaded jpg image named `sample`: + +1. Resizing the height to 200 pixels, maintaining the aspect ratio: + +

+
+ https://i.kriasoft.com/h_200/sample.jpg +

+ +2. Resizing to a width of 200 pixels and a height of 100 pixels: + +

+
+ https://i.kriasoft.com/w_200,h_100/sample.jpg +

+ ## Fixed coordinates cropping You can specify a region of the original image to crop by giving the `x` and `y` @@ -43,21 +72,21 @@ original image. For example, the following image shows many white sheep and one brown sheep.

- +
https://i.kriasoft.com/brown_sheep.jpg

To manipulate the picture so that only the brown sheep is visible, the image is cropped to a 300x200 region starting at the coordinate x = 355 and y = 410:

- +
https://i.kriasoft.com/x_355,y_410,w_300,h_200,c_crop/brown_sheep.jpg

The image can be further manipulated with chained transformations. For example, the 300x200 cropped version above, also scaled down to 150x100:

- +
https://i.kriasoft.com/x_355,y_410,w_300,h_200,c_crop/w_150,h_100,c_scale/brown_sheep.jpg