Solved

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

Posted on 2014-10-23
4
190 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
  • 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

825 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