Saving Div Content as Images on the Server

Question

I studied a bit of jQuery and .Net in VB. I created a product customization tool that basically splits divs and adds text, images, etc. Over tshirt.

I'm stuck at an important stage!

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

I heard about things that I could use to screen the contents of the browser on the server, which could be available for higher resolutions, etc., but that sounds a bit troublesome! and it would be nice to create a high resolution image.

I also heard how to convert html to html5 canvas and then write this ... but it looks too complicated for me, and browser support is a problem.

Is this possible in .NET?

Maybe something with javascript can be done?

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

EDIT:

I think maybe I could do with two solutions for this. Ideally, I get normal res jpg / png, etc. For display on a website, but also a high resolution print file is also highly desirable.

PostScript Printer - I heard about this, but I try my best to find a good resource to understand for beginners (especially with the black wiki). Perhaps I could create an html page from my div content and send it for printing to an EPS file. Does anyone know good tutorials for this?

Answer 1

We did it ... about 10 years ago. Interestingly, the available technology has not really changed much.

update is the best answer

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

Just a license. Do not do this yourself if you do not have real work on graphics and printing. I would say that in today's world you are looking somewhere around 4000-5000 hours of developers time to duplicate what they have done ... And this is if you have two top-level people who work on it.

---

Short answer: you cannot do this in html.

Slightly long answer :
This does not work partly because you cannot screen the client side and get the level of resolution required for printing a type type. Modern screen resolution is usually about 100 dpi. For a decent print, you really need something 3 to 6 times more than density. Otherwise, you will have a lot of pixelation and it will look like shit when it comes out.

Another answer:
It’s best to use something like SVG (scalable vector graphics) and provide a drawing surface type as a browser. There are several ways to do this using Flash (Spreadshirt.com uses this) or Silverlight (not recommended). We used flash, and it was very good.

You may be able to avoid using HTML 5. No matter which path you choose, it will be difficult.

Once the user is happy with his design and wants to print it, you create the final file and start the process to convert it to Postscript or in any other format your t-shirt supplier needs. The converter (aka RIP software) is going to either spend a lot of time on development or cost a ton of money ... choose one. (useful hint: buy it. Then we spent about $ 20 thousand. USA, and it was much cheaper than trying to develop).

Of course, this ignores issues such as color matching and calibration. That was our main problem. Each monitor is a little different, and what looks on one computer is red, pink on another.

And for a small background, we made individual wrapping paper. The user added text, selected images from our library or downloaded them and selected a template. Our prints came from HP Inkjet wide format printers (36 "and 60" wide). In the end, we spent from 200 thousand. Dollars. Up to 300 thousand dollars. Only on the resources of the developers to make this happen ... and, unfortunately, the price we had to sell was too high for the market.

Answer 2

If you can use any server tool check phantomjs . This is a mute webkit browser (without gui) that can display a screenshot of a page using javascript api. He has to do the trick.

Answer 3

Send the entire div with user-created content back to the server using an ajax call. Create an HTML document on the server using the "HtmlTextWriter" class. You can then convert this HTML file using external tools such as

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

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

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

Answer 4

The best option I've come across is wkhtmltopdf . It comes with the wkhtmltoimage tool. It uses QtWebKit (the Qt port of the WebKit rendering engine) to render the web page and converts the result to a PDF or an image of your choice, all done on the server side.

Since it uses WebKit, it displays everything (images, css and even javascript), like a modern browser does. In my use case, the results were very satisfactory and almost identical to what the browsers displayed.

To get started, you can see how to run external tools in .NET: Run an external EXE using C # .NET