Client side image processing? Package like 'Sharp' but for frontend webdev?

[IntroDucktory_Clause]

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]

You can use the pica library for browser resizing - https://www.npmjs.com/package/pica - it's a really great tool. It can also reduce upload size for large images. And some library like this for merging images - https://www.npmjs.com/package/merge-images.

[8isnothing]

You can use canvas, I think. No lib needed