Member Avatar for busybee2498

Nice! Question. I'm a photographer that shoots green screen. I in a the process in having a website built. I thought it would be cool if my guest could go to my website to get thier photos but first get to choose from 2 or 3 backgrounds.

So I would need a green screen toolbar online so the guest may drag them into different backgrounds. Would you know if the have a website plugin for that? Or do you know someone who could design that?

Thanks
Benny

  • 3 Contributors
  • 2 Replies
  • 51 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Nick Evan

Dani AI

Generated

Cool idea, . You can let guests try 2–3 backgrounds right in the browser with a simple chroma key tool: pick a background, tweak a tolerance slider, drag/zoom their photo, then download. Client-side keeps it fast and private (no upload round-trip) and works well if your shots are evenly lit with minimal green spill.

A minimal in-browser key can be done with Canvas per-pixel processing. The gist is: detect green-dominant pixels and set their alpha to 0, then draw the chosen background behind the result. For the drag/scale UI, a canvas framework like Fabric.js makes it easy to layer the keyed subject over background and allow transforms via handles.

// Basic green-screen key with Canvas
const imgData = ctx.getImageData(0, 0, w, h);
const d = imgData.data, threshold = 100, ratio = 1.2;
for (let i = 0; i < d.length; i += 4) {
  const r = d[i], g = d[i+1], b = d[i+2];
  if (g > threshold && g > r * ratio && g > b * ratio) d[i+3] = 0; // make green transparent
}
ctx.putImageData(imgData, 0, 0);

Notes that save time:

  • Use Canvas getImageData for the keying step MDN.
  • For the drag/zoom UI and layering backgrounds, Fabric.js gives you object handles, hit-testing, and export to PNG/JPEG Fabric.js.
  • Hair and semi-transparent edges? Add a softness slider (feather the alpha near the threshold), or use a segmentation model (runs in-browser) for cleaner mattes, e.g., MediaPipe Selfie Segmentation .
  • Host backgrounds and subject images on the same domain (or set proper CORS headers), otherwise the canvas becomes tainted and you cannot export.
  • Offer PNG export with transparency and JPEG with the selected background, plus a simple Reset button.

Recommended Answers

All 2 Replies

Member Avatar for WaltP

Nice! Question. Why did you resurrect a two year old thread asking a question that has no real relation
1) the the thread itself?
2) to the language the forum is about?

Member Avatar for Nick Evan

Split from here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.