@websolutespa/bom-mixer-image 1.0.9 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @websolutespa/bom-mixer-image
 
+## 1.8.1
+
+### Patch Changes
+
+- Modified: imageHandler
+
+## 1.8.0
+
+### Patch Changes
+
+- Updated dependencies [f8a1d97]
+  - @websolutespa/bom-core@1.8.0
+
 ## 1.0.9
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-declare function imageHandler({ domains }: {
+declare function imageHandler({ domains, sizes, quality, }: {
     domains: string[];
+    sizes: number[];
+    quality: number;
 }): any;
 
 export { imageHandler };

package/dist/index.js

@@ -68,25 +68,36 @@ function errorHandler(error, response) {
 
 // src/image/image.handler.ts
 var IMAGE_MAX_AGE = 604800;
-function imageHandler({ domains = [] }) {
+var IMAGE_QUALITY = 90;
+function imageHandler({
+  domains = [],
+  sizes = [],
+  quality = IMAGE_QUALITY
+}) {
   return apiHandler({
     // Defining the 'get' method for handling GET requests
     get: async (request, response) => {
       try {
-        const { url, w, h, q } = request.query;
-        if (typeof url !== "string") {
-          return response.status(400).send("missing url parameter");
+        const { slugs, origin = "", search = "", w, h, x, y, q } = request.query;
+        if (!Array.isArray(slugs) || slugs.length === 0) {
+          return response.status(400).send("missing slugs parameter");
         }
         const width = typeof w === "string" ? parseInt(w) : void 0;
         if (!width) {
           return response.status(400).send("missing w parameter");
         }
-        if (width > 2048) {
+        if (!sizes.includes(width)) {
           return response.status(400).send("invalid w parameter");
         }
         const height = typeof h === "string" ? parseInt(h) : void 0;
-        const quality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : 80));
-        const cachedName = urlToCachedName(url, width, height, quality);
+        const focalX = typeof x === "string" ? parseInt(x) : 50;
+        const focalY = typeof y === "string" ? parseInt(y) : 50;
+        const imageQuality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : quality));
+        if (imageQuality !== quality) {
+          return response.status(400).send("invalid q parameter");
+        }
+        const url = origin + "/" + slugs.join("/") + search;
+        const cachedName = urlToCachedName(url, width, height, focalX, focalY, imageQuality);
         if (fs.existsSync(cachedName)) {
           const cachedImage = await getCachedImage(cachedName);
           response.setHeader("Content-Type", "image/webp");
@@ -94,23 +105,25 @@ function imageHandler({ domains = [] }) {
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
           return response.send(cachedImage);
         }
+        const { headers } = request;
+        const referer = headers.referer;
+        const publicUrl = process.env.NEXT_PUBLIC_URL || "";
+        if (!referer || !publicUrl || referer.indexOf(publicUrl) !== 0) {
+          return response.status(401).send("you are not authorized to perform this action");
+        }
         if (url.indexOf("http") === -1 && isVercel()) {
           response.redirect(307, url);
         }
-        const originalImage = await getOriginalImage(url, domains, request.headers);
-        if (originalImage) {
-          const resizedImage = (0, import_sharp.default)(originalImage).resize({
-            width,
-            height: height ? height : void 0,
-            fit: import_sharp.default.fit.cover,
-            position: import_sharp.default.strategy.entropy,
-            withoutEnlargement: true
-          }).webp({
-            quality
+        const originalImageBuffer = await getOriginalImage(url, domains, request.headers);
+        if (originalImageBuffer) {
+          const originalImage = (0, import_sharp.default)(originalImageBuffer);
+          const resizedImage = await resizeImage(originalImage, width, height, focalX, focalY);
+          const compressedImage = resizedImage.webp({
+            quality: imageQuality
             // nearLossless: true,
           });
-          resizedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("error caching image", cachedName, error));
-          const data = await resizedImage.toBuffer();
+          compressedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("imageHandler.sharp.error", cachedName, error));
+          const data = await compressedImage.toBuffer();
           response.setHeader("Content-Type", "image/webp");
           response.setHeader("Expires", new Date(Date.now() + IMAGE_MAX_AGE * 1e3).toUTCString());
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
@@ -123,12 +136,61 @@ function imageHandler({ domains = [] }) {
     }
   });
 }
+async function resizeImage(originalImage, resizeWidth, resizeHeight, focalX, focalY) {
+  const defaultResizeOptions = () => {
+    return originalImage.resize({
+      width: resizeWidth,
+      height: resizeHeight ? resizeHeight : void 0,
+      fit: import_sharp.default.fit.cover,
+      position: import_sharp.default.strategy.attention,
+      withoutEnlargement: true
+    });
+  };
+  if (resizeHeight && (focalX !== 50 || focalY !== 50)) {
+    const { width: originalWidth, height: originalHeight } = await originalImage.metadata();
+    if (originalWidth && originalHeight) {
+      const resizeAspectRatio = resizeWidth / resizeHeight;
+      const originalAspectRatio = originalWidth / originalHeight;
+      const prioritizeHeight = resizeAspectRatio < originalAspectRatio;
+      const imageToResize = originalImage.clone();
+      const scaledImage = imageToResize.resize(prioritizeHeight ? {
+        height: resizeHeight,
+        fit: import_sharp.default.fit.cover
+      } : {
+        width: resizeWidth,
+        fit: import_sharp.default.fit.cover
+      });
+      const { info: scaledImageInfo } = await scaledImage.toBuffer({ resolveWithObject: true });
+      const extractWidth = resizeWidth ?? scaledImageInfo.width;
+      const maxOffsetX = scaledImageInfo.width - extractWidth;
+      const leftFocalEdge = Math.round(
+        scaledImageInfo.width * (focalX / 100) - extractWidth / 2
+      );
+      const extractX = Math.min(Math.max(0, leftFocalEdge), maxOffsetX);
+      const extractHeight = resizeHeight ?? scaledImageInfo.height;
+      const maxOffsetY = scaledImageInfo.height - extractHeight;
+      const topFocalEdge = Math.round(
+        scaledImageInfo.height * (focalY / 100) - extractHeight / 2
+      );
+      const extractY = Math.min(Math.max(0, topFocalEdge), maxOffsetY);
+      return scaledImage.extract({
+        left: extractX,
+        top: extractY,
+        width: extractWidth,
+        height: extractHeight
+      });
+    } else {
+      return defaultResizeOptions();
+    }
+  } else {
+    return defaultResizeOptions();
+  }
+}
 function getOriginalImage(url, domains, headers, skipUrlValidity = false) {
   return new Promise((resolve, reject) => {
     if (url.indexOf("http") === 0) {
       if (!skipUrlValidity && !checkUrlValidity(url, domains)) {
-        console.error("imageHandler.getOriginalImage.error invalid url");
-        return reject({ status: 401, message: "invalid url" });
+        return reject({ status: 401, message: "invalid origin" });
       }
       fetch(url, {
         method: "GET",
@@ -170,21 +232,24 @@ function getCachedImage(pathname) {
   });
 }
 function urlToFileName(url) {
-  let uniqueName = url.replace("://", "_").replace(".", "_").replace("/", "_");
-  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
+  const segments = url.split("?");
+  const path2 = segments[0];
+  const query = segments[1];
+  let uniqueName = path2.replace("://", "_").replace(/\.|\/|\?|=/g, "_");
+  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + (query ? "_" + query.replace(/\.|\/|\?|=/g, "_") : "") + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
   return uniqueName;
 }
 function isVercel() {
   return process && process.env && String(process.env.VERCEL) === "1";
 }
-function urlToCachedName(url, width, height, quality) {
+function urlToCachedName(url, width, height, focalX, focalY, quality) {
   const fileName = urlToFileName(url);
   const parsedName = path.parse(fileName);
   const cacheDir = isVercel() ? path.join("/tmp", ".cache") : path.join(process.cwd(), ".cache");
   if (!fs.existsSync(cacheDir)) {
     fs.mkdirSync(cacheDir);
   }
-  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_x_${focalX || 50}_y_${focalY || 50}_q_${quality}${parsedName.ext}`);
   return cachedName;
 }
 function checkUrlValidity(src, domains) {

package/dist/index.mjs

@@ -32,25 +32,36 @@ function errorHandler(error, response) {
 
 // src/image/image.handler.ts
 var IMAGE_MAX_AGE = 604800;
-function imageHandler({ domains = [] }) {
+var IMAGE_QUALITY = 90;
+function imageHandler({
+  domains = [],
+  sizes = [],
+  quality = IMAGE_QUALITY
+}) {
   return apiHandler({
     // Defining the 'get' method for handling GET requests
     get: async (request, response) => {
       try {
-        const { url, w, h, q } = request.query;
-        if (typeof url !== "string") {
-          return response.status(400).send("missing url parameter");
+        const { slugs, origin = "", search = "", w, h, x, y, q } = request.query;
+        if (!Array.isArray(slugs) || slugs.length === 0) {
+          return response.status(400).send("missing slugs parameter");
         }
         const width = typeof w === "string" ? parseInt(w) : void 0;
         if (!width) {
           return response.status(400).send("missing w parameter");
         }
-        if (width > 2048) {
+        if (!sizes.includes(width)) {
           return response.status(400).send("invalid w parameter");
         }
         const height = typeof h === "string" ? parseInt(h) : void 0;
-        const quality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : 80));
-        const cachedName = urlToCachedName(url, width, height, quality);
+        const focalX = typeof x === "string" ? parseInt(x) : 50;
+        const focalY = typeof y === "string" ? parseInt(y) : 50;
+        const imageQuality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : quality));
+        if (imageQuality !== quality) {
+          return response.status(400).send("invalid q parameter");
+        }
+        const url = origin + "/" + slugs.join("/") + search;
+        const cachedName = urlToCachedName(url, width, height, focalX, focalY, imageQuality);
         if (fs.existsSync(cachedName)) {
           const cachedImage = await getCachedImage(cachedName);
           response.setHeader("Content-Type", "image/webp");
@@ -58,23 +69,25 @@ function imageHandler({ domains = [] }) {
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
           return response.send(cachedImage);
         }
+        const { headers } = request;
+        const referer = headers.referer;
+        const publicUrl = process.env.NEXT_PUBLIC_URL || "";
+        if (!referer || !publicUrl || referer.indexOf(publicUrl) !== 0) {
+          return response.status(401).send("you are not authorized to perform this action");
+        }
         if (url.indexOf("http") === -1 && isVercel()) {
           response.redirect(307, url);
         }
-        const originalImage = await getOriginalImage(url, domains, request.headers);
-        if (originalImage) {
-          const resizedImage = sharp(originalImage).resize({
-            width,
-            height: height ? height : void 0,
-            fit: sharp.fit.cover,
-            position: sharp.strategy.entropy,
-            withoutEnlargement: true
-          }).webp({
-            quality
+        const originalImageBuffer = await getOriginalImage(url, domains, request.headers);
+        if (originalImageBuffer) {
+          const originalImage = sharp(originalImageBuffer);
+          const resizedImage = await resizeImage(originalImage, width, height, focalX, focalY);
+          const compressedImage = resizedImage.webp({
+            quality: imageQuality
             // nearLossless: true,
           });
-          resizedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("error caching image", cachedName, error));
-          const data = await resizedImage.toBuffer();
+          compressedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("imageHandler.sharp.error", cachedName, error));
+          const data = await compressedImage.toBuffer();
           response.setHeader("Content-Type", "image/webp");
           response.setHeader("Expires", new Date(Date.now() + IMAGE_MAX_AGE * 1e3).toUTCString());
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
@@ -87,12 +100,61 @@ function imageHandler({ domains = [] }) {
     }
   });
 }
+async function resizeImage(originalImage, resizeWidth, resizeHeight, focalX, focalY) {
+  const defaultResizeOptions = () => {
+    return originalImage.resize({
+      width: resizeWidth,
+      height: resizeHeight ? resizeHeight : void 0,
+      fit: sharp.fit.cover,
+      position: sharp.strategy.attention,
+      withoutEnlargement: true
+    });
+  };
+  if (resizeHeight && (focalX !== 50 || focalY !== 50)) {
+    const { width: originalWidth, height: originalHeight } = await originalImage.metadata();
+    if (originalWidth && originalHeight) {
+      const resizeAspectRatio = resizeWidth / resizeHeight;
+      const originalAspectRatio = originalWidth / originalHeight;
+      const prioritizeHeight = resizeAspectRatio < originalAspectRatio;
+      const imageToResize = originalImage.clone();
+      const scaledImage = imageToResize.resize(prioritizeHeight ? {
+        height: resizeHeight,
+        fit: sharp.fit.cover
+      } : {
+        width: resizeWidth,
+        fit: sharp.fit.cover
+      });
+      const { info: scaledImageInfo } = await scaledImage.toBuffer({ resolveWithObject: true });
+      const extractWidth = resizeWidth ?? scaledImageInfo.width;
+      const maxOffsetX = scaledImageInfo.width - extractWidth;
+      const leftFocalEdge = Math.round(
+        scaledImageInfo.width * (focalX / 100) - extractWidth / 2
+      );
+      const extractX = Math.min(Math.max(0, leftFocalEdge), maxOffsetX);
+      const extractHeight = resizeHeight ?? scaledImageInfo.height;
+      const maxOffsetY = scaledImageInfo.height - extractHeight;
+      const topFocalEdge = Math.round(
+        scaledImageInfo.height * (focalY / 100) - extractHeight / 2
+      );
+      const extractY = Math.min(Math.max(0, topFocalEdge), maxOffsetY);
+      return scaledImage.extract({
+        left: extractX,
+        top: extractY,
+        width: extractWidth,
+        height: extractHeight
+      });
+    } else {
+      return defaultResizeOptions();
+    }
+  } else {
+    return defaultResizeOptions();
+  }
+}
 function getOriginalImage(url, domains, headers, skipUrlValidity = false) {
   return new Promise((resolve, reject) => {
     if (url.indexOf("http") === 0) {
       if (!skipUrlValidity && !checkUrlValidity(url, domains)) {
-        console.error("imageHandler.getOriginalImage.error invalid url");
-        return reject({ status: 401, message: "invalid url" });
+        return reject({ status: 401, message: "invalid origin" });
       }
       fetch(url, {
         method: "GET",
@@ -134,21 +196,24 @@ function getCachedImage(pathname) {
   });
 }
 function urlToFileName(url) {
-  let uniqueName = url.replace("://", "_").replace(".", "_").replace("/", "_");
-  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
+  const segments = url.split("?");
+  const path2 = segments[0];
+  const query = segments[1];
+  let uniqueName = path2.replace("://", "_").replace(/\.|\/|\?|=/g, "_");
+  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + (query ? "_" + query.replace(/\.|\/|\?|=/g, "_") : "") + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
   return uniqueName;
 }
 function isVercel() {
   return process && process.env && String(process.env.VERCEL) === "1";
 }
-function urlToCachedName(url, width, height, quality) {
+function urlToCachedName(url, width, height, focalX, focalY, quality) {
   const fileName = urlToFileName(url);
   const parsedName = path.parse(fileName);
   const cacheDir = isVercel() ? path.join("/tmp", ".cache") : path.join(process.cwd(), ".cache");
   if (!fs.existsSync(cacheDir)) {
     fs.mkdirSync(cacheDir);
   }
-  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_x_${focalX || 50}_y_${focalY || 50}_q_${quality}${parsedName.ext}`);
   return cachedName;
 }
 function checkUrlValidity(src, domains) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-image",
-  "version": "1.0.9",
+  "version": "1.8.1",
   "description": "Mixer Image module of the BOM Repository",
   "keywords": [
     "bom",
@@ -15,7 +15,7 @@
   "scripts": {
     "lint": "eslint *.ts*",
     "test": "jest",
-    "test-watch": "npm test -- --watch",
+    "test-watch": "npm test -- --watch --silent=false",
     "coverage:integration": "npm run test -- --coverage",
     "coverage": "run-s -c --silent coverage:*",
     "compile": "tsup ./src/index.ts --format esm,cjs --dts",

package/src/image/image.handler.ts

@@ -11,21 +11,31 @@ import sharp from 'sharp';
 import { apiHandler } from '../api/api.handler';
 
 const IMAGE_MAX_AGE = 604800;
+const IMAGE_FOCAL_X = 50;
+const IMAGE_FOCAL_Y = 50;
+const IMAGE_QUALITY = 90;
 
 // Exporting the 'imageHandler' function
-export function imageHandler({ domains = [] }: { domains: string[] }) {
+export function imageHandler({
+  domains = [],
+  sizes = [],
+  quality = IMAGE_QUALITY,
+}: {
+  domains: string[];
+  sizes: number[];
+  quality: number;
+}) {
   // Returning the 'apiHandler' function with a configuration object
   return apiHandler({
     // Defining the 'get' method for handling GET requests
     get: async (request: NextApiRequest, response: NextApiResponse) => {
       try {
-        // Destructuring 'url', 'w', 'h', 'q' from the request query
-        const { url, w, h, q } = request.query;
-        // Checking if 'url' is not a string
-        if (typeof url !== 'string') {
-          // Logging an error message and returning a 400 status code with a message
-          // console.error('imageHandler', 'missing url parameter');
-          return response.status(400).send('missing url parameter');
+        // Destructuring 'url', 'w', 'h', 'x', 'y', 'q' from the request query
+        const { slugs, origin = '', search = '', w, h, x, y, q } = request.query;
+        // Checking slugs
+        if (!Array.isArray(slugs) || slugs.length === 0) {
+          // console.error('imageHandler', 'missing slugs parameter');
+          return response.status(400).send('missing slugs parameter');
         }
         // Parsing 'w' to an integer and assigning it to 'width'
         const width = typeof w === 'string' ? parseInt(w) : undefined;
@@ -35,15 +45,26 @@ export function imageHandler({ domains = [] }: { domains: string[] }) {
           // console.error('imageHandler', 'missing w parameter');
           return response.status(400).send('missing w parameter');
         }
-        if (width > 2048) {
+        // if (width > 2048) {
+        if (!sizes.includes(width)) {
           return response.status(400).send('invalid w parameter');
         }
         // Parsing 'h' to an integer and assigning it to 'height'
         const height = typeof h === 'string' ? parseInt(h) : undefined;
-        // Parsing 'q' to an integer, ensuring it's between 30 and 100, and assigning it to 'quality'
-        const quality = Math.max(30, Math.min(100, (typeof q === 'string' ? parseInt(q) : 80)));
+        // Parsing 'x' to an integer and assigning it to 'focalX'
+        const focalX = typeof x === 'string' ? parseInt(x) : 50;
+        // Parsing 'y' to an integer and assigning it to 'focalY'
+        const focalY = typeof y === 'string' ? parseInt(y) : 50;
+        // Parsing 'q' to an integer, ensuring it's between 30 and 100, and assigning it to 'imageQuality'
+        const imageQuality = Math.max(30, Math.min(100, (typeof q === 'string' ? parseInt(q) : quality)));
+        // if (width > 2048) {
+        if (imageQuality !== quality) {
+          return response.status(400).send('invalid q parameter');
+        }
+        // Generating url
+        const url = origin + '/' + slugs.join('/') + search;
         // Generating a cached name for the image
-        const cachedName = urlToCachedName(url, width, height, quality);
+        const cachedName = urlToCachedName(url, width, height, focalX, focalY, imageQuality);
         // Checking if the cached image exists
         if (fs.existsSync(cachedName)) {
           // console.log('imageHandler.fromCache', cachedName);
@@ -58,33 +79,38 @@ export function imageHandler({ domains = [] }: { domains: string[] }) {
           // Ending the response and sending the cached image
           return response.send(cachedImage);
         }
+        // Check referrer
+        const { headers } = request;
+        const referer = headers.referer;
+        const publicUrl = process.env.NEXT_PUBLIC_URL || '';
+        // console.log('referef', referer, 'publicUrl', publicUrl);
+        if (!referer || !publicUrl || referer.indexOf(publicUrl) !== 0) {
+          return response.status(401).send('you are not authorized to perform this action');
+        }
         // Temporarily fix Vercel local image issue
         if (url.indexOf('http') === -1 && isVercel()) {
           response.redirect(307, url);
         }
         // Reading the original image
-        const originalImage = await getOriginalImage(url, domains, request.headers);
+        const originalImageBuffer = await getOriginalImage(url, domains, request.headers);
         // Checking if the original image exists
-        if (originalImage) {
+        if (originalImageBuffer) {
+          // Original image
+          const originalImage = sharp(originalImageBuffer);
           // Resizing the original image and converting it to WebP format
-          const resizedImage = sharp(originalImage)
-            .resize({
-              width,
-              height: height ? height : undefined,
-              fit: sharp.fit.cover,
-              position: sharp.strategy.entropy,
-              withoutEnlargement: true,
-            })
+          const resizedImage = await resizeImage(originalImage, width, height, focalX, focalY);
+          // Converting resized image to WebP format
+          const compressedImage = resizedImage
             .webp({
-              quality,
+              quality: imageQuality,
               // nearLossless: true,
             });
           // Saving the resized image to the cache
-          resizedImage.toFile(cachedName)
+          compressedImage.toFile(cachedName)
             .then(() => console.log('imageHandler.sharp.cached', cachedName))
-            .catch((error: any) => console.error('error caching image', cachedName, error));
+            .catch((error: any) => console.error('imageHandler.sharp.error', cachedName, error));
           // Converting the resized image to a buffer
-          const data = await resizedImage.toBuffer();
+          const data = await compressedImage.toBuffer();
           // Setting the 'Content-Type' header to 'image/webp'
           response.setHeader('Content-Type', 'image/webp');
           // Setting the 'Expires' header to the current time plus the maximum age of the image (in seconds)
@@ -103,6 +129,63 @@ export function imageHandler({ domains = [] }: { domains: string[] }) {
   });
 }
 
+async function resizeImage(originalImage: sharp.Sharp, resizeWidth: number, resizeHeight: number | undefined, focalX: number, focalY: number): Promise<sharp.Sharp> {
+  const defaultResizeOptions = () => {
+    return originalImage.resize({
+      width: resizeWidth,
+      height: resizeHeight ? resizeHeight : undefined,
+      fit: sharp.fit.cover,
+      position: sharp.strategy.attention,
+      withoutEnlargement: true,
+    });
+  };
+  if (resizeHeight && (focalX !== 50 || focalY !== 50)) {
+    const { width: originalWidth, height: originalHeight } = await originalImage.metadata();
+    if (originalWidth && originalHeight) {
+      const resizeAspectRatio = resizeWidth / resizeHeight;
+      const originalAspectRatio = originalWidth / originalHeight;
+      const prioritizeHeight = resizeAspectRatio < originalAspectRatio;
+      const imageToResize = originalImage.clone();
+      // Scale the image up or down to fit the resize dimensions
+      const scaledImage = imageToResize.resize(prioritizeHeight ? {
+        height: resizeHeight,
+        fit: sharp.fit.cover,
+      } : {
+        width: resizeWidth,
+        fit: sharp.fit.cover,
+      });
+      const { info: scaledImageInfo } = await scaledImage.toBuffer({ resolveWithObject: true });
+      // extractWidth
+      const extractWidth = resizeWidth ?? scaledImageInfo.width;
+      const maxOffsetX = scaledImageInfo.width - extractWidth;
+      const leftFocalEdge = Math.round(
+        scaledImageInfo.width * (focalX / 100) - extractWidth / 2
+      );
+      // extractX
+      const extractX = Math.min(Math.max(0, leftFocalEdge), maxOffsetX);
+      // extractHeight
+      const extractHeight = resizeHeight ?? scaledImageInfo.height;
+      const maxOffsetY = scaledImageInfo.height - extractHeight;
+      const topFocalEdge = Math.round(
+        scaledImageInfo.height * (focalY / 100) - extractHeight / 2
+      );
+      // extractY
+      const extractY = Math.min(Math.max(0, topFocalEdge), maxOffsetY);
+      // Extract the focal area from the scaled image
+      return scaledImage.extract({
+        left: extractX,
+        top: extractY,
+        width: extractWidth,
+        height: extractHeight,
+      });
+    } else {
+      return defaultResizeOptions();
+    }
+  } else {
+    return defaultResizeOptions();
+  }
+}
+
 // Defining the 'getOriginalImage' function
 function getOriginalImage(url: string, domains: string[], headers: IncomingHttpHeaders, skipUrlValidity: boolean = false): Promise<Buffer> {
   // Returning a new promise
@@ -113,8 +196,8 @@ function getOriginalImage(url: string, domains: string[], headers: IncomingHttpH
         !skipUrlValidity &&
         !checkUrlValidity(url, domains)
       ) {
-        console.error('imageHandler.getOriginalImage.error invalid url');
-        return reject({ status: 401, message: 'invalid url' });
+        // console.error('imageHandler.getOriginalImage.error invalid origin');
+        return reject({ status: 401, message: 'invalid origin' });
       }
       // Fetching the image from the URL
       fetch(url, {
@@ -187,9 +270,13 @@ function getCachedImage(pathname: string): Promise<Buffer> {
 // Defining the 'urlToFileName' function
 function urlToFileName(url: string): string {
   // Replacing useless characters with UNDERSCORE
-  let uniqueName = url.replace('://', '_').replace('.', '_').replace('/', '_');
+  const segments = url.split('?');
+  const path = segments[0];
+  const query = segments[1];
+  let uniqueName = path.replace('://', '_').replace(/\.|\/|\?|=/g, '_');
   // Replacing last UNDERSCORE with a DOT
   uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf('_'))
+    + (query ? '_' + query.replace(/\.|\/|\?|=/g, '_') : '')
     + '.' + uniqueName.substring(uniqueName.lastIndexOf('_') + 1, uniqueName.length);
   // Returning the unique name
   return uniqueName;
@@ -200,7 +287,7 @@ function isVercel(): boolean {
 }
 
 // Defining the 'urlToCachedName' function
-function urlToCachedName(url: string, width: number, height: number | undefined, quality: number): string {
+function urlToCachedName(url: string, width: number, height: number | undefined, focalX: number | undefined, focalY: number | undefined, quality: number): string {
   // Converting the URL to a file name
   const fileName = urlToFileName(url);
   // Parsing the file name
@@ -215,7 +302,7 @@ function urlToCachedName(url: string, width: number, height: number | undefined,
     fs.mkdirSync(cacheDir);
   }
   // Generating the cached name
-  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_x_${focalX || 50}_y_${focalY || 50}_q_${quality}${parsedName.ext}`);
   // Returning the cached name
   return cachedName;
 }