danny34 Posted October 1, 2025 Share Posted October 1, 2025 (edited) 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 October 1, 2025 by requinix unlinking Quote Link to comment https://forums.phpfreaks.com/topic/332062-run-time-image-generation-for-picture-framing-project/ Share on other sites More sharing options...
gizmola Posted October 1, 2025 Share Posted October 1, 2025 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. Quote Link to comment https://forums.phpfreaks.com/topic/332062-run-time-image-generation-for-picture-framing-project/#findComment-1661336 Share on other sites More sharing options...
danny34 Posted October 2, 2025 Author Share Posted October 2, 2025 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. Quote Link to comment https://forums.phpfreaks.com/topic/332062-run-time-image-generation-for-picture-framing-project/#findComment-1661339 Share on other sites More sharing options...
kicken Posted October 2, 2025 Share Posted October 2, 2025 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. 2 Quote Link to comment https://forums.phpfreaks.com/topic/332062-run-time-image-generation-for-picture-framing-project/#findComment-1661342 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.