The idea is to pass a query that contends the filename and the size as the following:
localhost:3000/images?filename=myImage&width=100&height=100
First I want to find out how to get the images from the image folder Second use them to resize the image. And finally, write the file in a new folder call upload. I am trying with the following code for now but I am stuck and need some help to continue: I start refactoring the code and now I have a utilities.ts file with the following code:
import { promises as fs } from "fs";
// accessing the images
let getAccessToFiles = (path: string): boolean => {
try {
fs.access(path)
return true;
} catch (err) {
return false;
}
}
let getFilesName = (
imageToResize: string,
width: number | null,
height: number | null
): string => {
let filename = imageToResize;
if (width) {
filename += `width${width}`;
}
if (height) {
filename += `height${height}`;
}
return `${filename}.jpg`
};
export { getAccessToFiles, getFilesName };
Now I just create the conversion like this:
import express, { Request, Response, Router } from "express";
import path from "path";
import sharp from "sharp";
import { getAccessToFiles, getFilesName } from "../../utils/utilities";
const resizeImages: Router = Router();
const app = express();
// access the images
const importImages = path.resolve(__dirname, "images");
// add the output file
const exportImages = path.resolve(__dirname, "uploads");
// allowing our application to parse json input
app.use(express.json());
resizeImages.get("/", (req: Request, res: Response) => {
const resizeImage = async (
imageName: string,
width: number | null,
height: number | null
): Promise<string> => {
const resizedImageName = getFilesName(imageName, width, height);
try {
await sharp(`${importImages}${imageName}.jpg`)
.resize(width, height)
.jpeg()
.toFile(`${importImages}${resizedImageName}`);
} catch (err) {
res.status(400).json({ error: err});
}
return resizedImageName;
};
return res.send(resizeImage)
});
export default resizeImages;
And finally have the following error: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received function resizeImage
express puts the query params in a prop called query, so in the OP code: req.query.filename, req.query.width, and req.query.height.
More plausible (not tested) version of the OP code would look like this...
// presuming a query looks like "?filename=myImage&width=100&height=100"
const importImages = './images'; // note the removal of the trailing '/'
const exportImages = './uploads';
resizeImages.get('/', (req, res) => { // note the suggested change in route name
// note that res.send() moved to become the last promise in the chain
const fileIn = `${importImages}/${req.query.filename}`;
const fileOut = `${exportImages}/${req.query.filename}`;
// note the construction of a complete input and output file specs
const params = {
width: req.query.width,
height: req.query.height,
fit: 'contain',
background: { r: 255, g: 0, b: 0, alpha: 0.5 }
};
return sharp(fileIn)
.resize(params).toBuffer().then(data => {
fs.writeFile(fileOut, data);
}).then(() => {
return res.send('done');
})
.catch(err => {
console.log(err);
return res.status(400).send(err);
});
});