Solved

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

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to size popup in jquery mobile 4 60
Add Rows on a Table 8 51
Best explanation of following code css 11 40
Not picking up custom HTML-5 elements on page? 9 22
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

732 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