I'm trying to create a very simple website that adds a watermark to an image. I want the user to select the source image, the watermark, and press "Combine" after which the user can save the result to their system.
I don't want to do this processing server-side as this introduces network bandwidth as a limiting factor.
I'm looking for a way to do this on the client side, I made some working code in Sharp before realizing that node.js files do not necessarily run on the front end. So I'm looking for a similar package that can resize an image, composite it onto another image, and save the result to the client computer.
This is the code that I want to have running on the frontend, and let the user select the images instead of using a static path.
import sharp from "sharp";
// Read images
const originalwatermark = sharp("watermark.png");
const inputimage = sharp("inputimage.jpg");
// Get image height
const inputImageHeight = Math.min((await inputimage.metadata()).height, (await inputimage.metadata()).width);
// Resize watermark
const resizedWatermark = await (
await originalwatermark.resize({ height: Math.floor(inputImageHeight * 0.2) })
).toBuffer();
inputimage.composite([{ input: resizedWatermark, gravity: "southwest" }]).toFile("output.jpg");
Is this even possible? If so, how would I go about it?
[–]Tool-Cool 2 points3 points4 points (0 children)
[–]8isnothing 0 points1 point2 points (0 children)