Jump to content

Recommended Posts

Hello everyone,

I’m working on a project where I want to create an online picture framing tool similar to the one used on Alison Kingsgate’s website here: alisonkingsgate dot co dot uk /madetomeasure.

The tool allows customers to:

Enter their desired frame size (width and height).

Choose from different frame styles and colours.

See a real-time visual preview of how the picture frame would look with their chosen options.

Get the calculated price based on measurements and selected frame style.

What I want to achieve:

A system that dynamically generates the frame image in real time (just like Alison Kingsgate’s tool).

The ability to add different frame profiles, mount boards, colours, and glass/acrylic options.

An accurate price calculator that updates as customers change sizes or styles.

A responsive and smooth user interface (works on both desktop and mobile).

My questions are:

Which technology stack or libraries would be best suited for this? (JavaScript/React/Three.js/Canvas/SVG, etc.)

Should the frame preview be created using pre-rendered image slices (top, bottom, left, right edges of the frame) or by programmatically drawing with canvas/SVG?

How do I handle high-quality previews without making the tool too heavy or slow?

Would it be better to build this as a standalone JavaScript widget or integrate with an e-commerce platform (like WooCommerce/Shopify) directly?

Are there any existing open-source tools, plugins, or libraries that could save development time?

I would really appreciate advice from anyone who has experience with:

Dynamic product customisers

Real-time image generation for e-commerce

Pricing logic based on custom measurements

Any guidance, examples, or recommended resources would be very helpful.

Thank you in advance!

Edited by requinix
unlinking

You're asking for an opinion, so I'll give you mine.

You need a well designed relational model to store all the facts required to create the quotes.  That should be the first thing you do.

From a UI standpoint, I would use SVG, as intrinsically it's based on vector graphics which you can scale mathematically.  The browser does the rendering, and there are numerous javascript libraries that could be helpful.  You might want to start with Two.js, as it is has the abstraction of a 2 dimensional "scene" which sounds like it would be a very good fit for your requirements.

I would plan on having the base frame styles stored in the database as svg files you then load.  It's up to you whether you want to use svg to change their colors, or just make sure you have a specific version for all the available colors.  

12 hours ago, gizmola said:

You're asking for an opinion, so I'll give you mine.

You need a well designed relational model to store all the facts required to create the quotes.  That should be the first thing you do.

From a UI standpoint, I would use SVG, as intrinsically it's based on vector graphics which you can scale mathematically.  The browser does the rendering, and there are numerous javascript libraries that could be helpful.  You might want to start with Two.js, as it is has the abstraction of a 2 dimensional "scene" which sounds like it would be a very good fit for your requirements.

I would plan on having the base frame styles stored in the database as svg files you then load.  It's up to you whether you want to use svg to change their colors, or just make sure you have a specific version for all the available colors.  


Thanks for your answer. One thing I’m still unclear about: Alison Kingsgate’s Made to Measure framing tool generates realistic frame previews on run time (not just flat SVG outlines). If have a look to this you can see: https://alisonkingsgate.co.uk/madetomeasure. Do you know whether they’re using pre-rendered image slices stitched together in canvas, or some other technique to generate those images dynamically?

I think they are using PHP Laravel. The impressing this is there the exact frame texture. Once I also discussed such issue on Microsoft Tech forum https://learn.microsoft.com/en-us/answers/ but I am still in working of Finding the solution.

If you open your browser's developer tools and look at the network tab while going through the tool, you can see that they load individual slices (example) and use a library called dom-to-image to generate the final image.

So, presumably they have an image of the top, bottom, left and right (or top/left, then mirror it) and piece those together using HTML and CSS to generating the frame structure then use the JS library to convert that to an image.

 

  • Great Answer 2

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.