Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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 …

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now