Solved

How to create a web page snapshot not based on the DOM

Posted on 2014-10-23
4
229 Views
Last Modified: 2014-10-27
I'm developing a website where people can design(customize) a product. Something similar to Vista Print where you can design a business card or a banner. After the customer has designed the product I need to capture a screenshot of the finished design. I've seen scripts such as html2canvas but they base the screenshot on the DOM which only shows what the webpage looked like before the customer started to drag and drop objects in the design process.

I need a way to capture what the product looks like when the customer clicks the add to basket button.

Web product page, the DOM viewA finished design sample, this is what I need to capture in a screen shot
0
Comment
Question by:Gary Samuels
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 29

Expert Comment

by:fibo
ID: 40401848
Do you want to make a screen capture in a single image, or a text capture in some data model?

You say you do not want the DOM because it would not have been updated. Would finding a way to update it solve your problem?
0
 

Author Comment

by:Gary Samuels
ID: 40401897
The only thing I need is a single image of the product. My next step would be to save the image as a file and attach it to the order.

I'm not sure I understand your question about updating the page because if I refresh the page it returns to the original screen and all customization is lost.
0
 
LVL 29

Accepted Solution

by:
fibo earned 500 total points
ID: 40402410
You might consider using some ajax to save the current state of your DOM... or directly have a "save" button for your customer to register her/ his config
0
 
LVL 29

Expert Comment

by:fibo
ID: 40407289
B-) glad to give some help. Thx for the points and grade!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question