javascript - Saving Div Content As Image On Server - Stack Overflow

admin管理员组

文章数量:1355655

I have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.

I'm stuck on an important stage!

I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.

I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.

I have also heard to converting the html to html5 canvas then writing that out... but looks too plicated for me to fathom and browser support is an issue.

Is this possible in .NET?

Perhaps something with javascript could be done?

Any help or guidance in the correct direction would be appreciated!

EDIT:

I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.

PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?

I have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.

I'm stuck on an important stage!

I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.

I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.

I have also heard to converting the html to html5 canvas then writing that out... but looks too plicated for me to fathom and browser support is an issue.

Is this possible in .NET?

Perhaps something with javascript could be done?

Any help or guidance in the correct direction would be appreciated!

EDIT:

I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.

PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?

• javascript
• jquery
• asp
• vb

Share Improve this question Follow edited Jan 27, 2012 at 3:18 Joel Coehoorn 417k114114 gold badges578578 silver badges813813 bronze badges asked Jan 18, 2012 at 14:47 user1090077user1090077 8

• Create a browser process server side, grab a screenshot from that, save the image. There are plete libraries for that. Threading can be a problem, but always better than clientside. – Caspar Kleijne Commented Jan 18, 2012 at 14:52
• Thanks for your response @CasparKleijne. Are you able to remend one? – user1090077 Commented Jan 18, 2012 at 14:54
• 2 Another possibility is to use a server-side tool to convert HTML markup to a scalable form like PDF, such as Prince or Flying Saucer. Of course there'll be some significant problems with resolution if image files are included; to me that'll be a big challenge. For printing on a shirt, you want a pretty high DPI in order for it to look good. Have you investigated what places like spreadshirt. do? – Pointy Commented Jan 18, 2012 at 14:55
• Hi @Pointy. Yes have looked at spreadshirt. Very nice website. No idea what they are using! I have just read another article and perhaps printing out to a postscript printer to give a high res file would do it... Trouble is so many options! I want the easiest as Im a beginner and also the most reliable and the best at the same time! Not asking much am I!!! Thanks for your input, the idea of a PDF got me on the track of perhaps doing something better like generating a EPS file that is much better for going to the printers with. – user1090077 Commented Jan 18, 2012 at 14:59
• 1 For the record, SpreadShirt is using flash. – ChrisLively Commented Jan 18, 2012 at 17:15

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 2

We did this... about 10 years ago. Interestingly, the tech available really hasn't changed too much.

update - Best Answer

Spreadshirt licenses their product: http://blog.spreadshirt/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/

Just license it. Don't do this yourself, unless you have real graphics manipulating and print production experience. I'd say in today's world you're looking at somewhere around 4,000 to 5,000 hours of dev time to duplicate what they did... And that's if you have two top tier people working on it.

---

Short answer: you can't do it in html.

Slightly longer answer:
It doesn't work in part because you can't screen cap the client side and get the level of resolution needed for production type printing. Modern screen resolution is usually on the order of 100 ppi. For a decent print you really need something between 3 and 6 times that density. Otherwise you'll have lots of pixelation and it will generally look like crap when it es out.

A different Answer:
Your best bet is to leverage something like SVG (scalable vector graphics) and provide a type of drawing surface to the browser. There are several ways of doing this using Flash (Spreadshirt. uses this) or Silverlight (not remended). We used flash and it was pretty good.

You might be able to get away with using HTML 5. Regardless, whatever path you pick is going to be plicated.

Once the user is happy with their drawing and wants to print it out, you create the final file and run a process to convert it to Postscript or whatever format your t-shirt provider needs. The converter (aka RIP software) is going to either take a long time to develop or cost a bunch of money... pick one. (helpful hint: buy it. Back then, we spent around $20k US and it was far cheaper than trying to develop).

Of course, this ignores issues such as color matching and calibration. This was actually our primary problem. Everyone's monitor is slightly different and what looks like red on one machine is pink on another.

And for a little background, we were doing customized wrapping paper. The user added text, selected images from our library or uploaded their own, and picked a pattern. Our prints came out on large-format HP Inkjet printers (36" and 60" wide). Ultimately we spent between $200k and $300k just on dev resources to make it happen... and it did, unfortunately, the price point we had to sell at was too high for the market.

If you can use some server-side tool, check phantomjs. This is a headless webkit browser (with no gui) which can take a page's screenshot, an uses a javascript api. It should do the trick.

Send the whole div with user generated content back to server using ajax call. Generate an HTML Document on server using 'HtmlTextWriter' class. Then you can convert that HTML file using external tools like

(1) http://www.officeconvert./products_website_to_image.htm#easyhtmlsnapshot

(2) http://html-to-image.acasystems./faq-html-to-picture.htm

which are not free tools, but you can use them by creating new Process on server.

The best option I came across is wkhtmltopdf. It es with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.

Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. In my use case, the results have been very satisfying and are almost identical to what browsers would render.

To start, you may want to look at how to run external tools in .NET: Execute an external EXE with C#.NET

本文标签： javascriptSaving Div Content As Image On ServerStack Overflow