Offset coordinates for cropping: x_5,y_5,w_80,h_60,c_crop (#1)

README.md

@@ -1,4 +1,7 @@
-# Image Resizing
+# Cloud Image Resizing · [![npm package][npm-badge]][npm]
+
+[npm-badge]: https://img.shields.io/npm/v/image-resizing.svg?style=flat-square
+[npm]: https://www.npmjs.org/package/image-resizing
 
 Node.js backend (middleware) for image manipulation needs (transform, resize,
 optimize) that can be hosted in a serverless environment such as Google Cloud
@@ -8,6 +11,10 @@ Functions.
 
 Create a Google Cloud Function project that exports image transformation HTTP handler:
 
+```
+$ npm install image-resizing --save
+```
+
 ```js
 const { createHandler } = require("image-resizing");
 
@@ -24,7 +31,9 @@ module.exports.img = createHandler({
 Deploy it to GCP using Node.js v12+ runtime and configure a CDN on top of it.
 
 ```
-https://example.com/w_80,h_60,c_fill/example.jpg
+https://example.com/image.jpg - original image
+https://example.com/w_80,h_60,c_fill/image.jpg - resized image (80x60)
+https://example.com/x_10,y_10,w_80,h_60,c_crop/image.jpg - cropped image (80x60 at 10,10 offset)
 ```
 
 ## References
@@ -36,7 +45,7 @@ https://example.com/w_80,h_60,c_fill/example.jpg
 ## Contributing
 
 Contributions of any kind are welcome! If you're unsure about something or need
-directions, don't hesitate to get in touch on[Discord](https://discord.com/invite/bSsv7XM).
+directions, don't hesitate to get in touch on [Discord](https://discord.com/invite/bSsv7XM).
 
 ## License
 

lib/types.d.ts

@@ -6,6 +6,8 @@ export declare type Transform = {
     width?: number;
     height?: number;
     crop?: "crop" | "fill";
+    x?: number;
+    y?: number;
 };
 export declare type Param<T> = {
     readonly key: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-resizing",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Node.js backend (middleware) for image manipulation needs (transform, resize, optimize).",
   "keywords": [
     "cloud functions",

src/params.ts

@@ -26,4 +26,16 @@ export const params: Params = {
     parse: (value) => value,
     validate: (value) => ["crop", "fill"].includes(value),
   } as Param<"crop" | "fill">,
+
+  x: {
+    key: "x",
+    parse: (value) => parseInt(value, 10),
+    validate: (value) => !isNaN(value),
+  } as Param<number>,
+
+  y: {
+    key: "y",
+    parse: (value) => parseInt(value, 10),
+    validate: (value) => !isNaN(value),
+  } as Param<number>,
 };

src/parse.test.ts

@@ -77,3 +77,25 @@ it("/img/w_80,h_60,c_fill/w_60,h_40/example.jpg", () => {
     }
   `);
 });
+
+it("/img/x_10,y_5,w_80,h_60,c_crop/example.jpg", () => {
+  const result = parseUrlPath(
+    "/img/x_10,y_5,w_80,h_60,c_crop/example.jpg",
+    params,
+  );
+  expect(result).toMatchInlineSnapshot(`
+    Object {
+      "source": "img/example.jpg",
+      "target": "img/example__x_10,y_5,w_80,h_60,c_crop.jpg",
+      "transforms": Array [
+        Object {
+          "crop": "crop",
+          "height": 60,
+          "width": 80,
+          "x": 10,
+          "y": 5,
+        },
+      ],
+    }
+  `);
+});

src/transform.test.ts

@@ -96,3 +96,20 @@ it("h_60.png", (done) => {
     },
   );
 });
+
+it("x_260,y_160,w_120,h_80,c_crop.png", (done) => {
+  const transforms: Transform[] = [
+    { x: 260, y: 160, width: 120, height: 80, crop: "crop" },
+  ];
+  transform(fs.createReadStream("test.jpg"), transforms).toBuffer(
+    "png",
+    (err, image) => {
+      if (err) {
+        done(err);
+      } else {
+        expect(image).toMatchImageSnapshot();
+        done();
+      }
+    },
+  );
+});

src/transform.ts

@@ -18,7 +18,13 @@ export function transform(
 
   transforms.forEach((params) => {
     if (params.width && params.height) {
-      if (params.crop === "fill") {
+      if (
+        params.y !== undefined &&
+        params.y !== undefined &&
+        params.crop === "crop"
+      ) {
+        state = state.crop(params.width, params.height, params.x, params.y);
+      } else if (params.crop === "fill") {
         state = state
           .resize(params.width, params.height, "^")
           .gravity("Center")

src/types.ts

@@ -8,6 +8,8 @@ export type Transform = {
   width?: number;
   height?: number;
   crop?: "crop" | "fill";
+  x?: number;
+  y?: number;
 };
 
 export type Param<T> = {