将Div内容保存为服务器上的图像

Question

我在VB中学习了一些jQuery和.Net。 我已经创建了一种产品自定义工具，它基本上可以叠加div并在T恤上添加文本，图像等。

我陷入了一个重要的舞台！

我需要能够将包含所有这些div文本和图像的div的内容转换为一个平面图像，同时考虑到已经应用于它的任何CSS。

我听说过可以用来屏幕捕获服务器上浏览器内容的东西，这可能是低分辨率等等，但听起来有点麻烦！ 并且创建高分辨率的图像真的很棒。

我也听说将html转换为html5画布然后写出来...但看起来太复杂了我无法理解和浏览器支持是一个问题。

这在.NET中可行吗？

也许用javascript可以做些什么？

任何帮助或指导正确的方向将不胜感激！

编辑：

我想也许我可以做两个解决方案。 理想情况下，我最终会在网站上显示正常的res jpg / png等，但是打印就绪的高分辨率文件也是非常理想的。

PostScript打印机 - 我听说过它但是我很难找到一个很好的资源来为初学者理解它（特别是wiki黑掉）。 也许我可以从我的div内容创建一个html页面并将其发送到EPS文件。 有人知道任何好的教程吗？

Answer 1

大约10年前，我们做到了这一点。 有趣的是，可用的技术确实没有太大变化。

更新 - 最佳答案

Spreadshirt许可他们的产品： http ： //blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/

只是许可它。 不要自己这样做，除非你有真正的图形操作和打印生产经验。 我会说在今天的世界里，你正在寻找大约4,000到5,000小时的开发时间来复制他们所做的......而且如果你有两个顶级人员正在研究它。

---

简短的回答：你不能用html来做。

答案稍长一点 ：
它无法正常工作，因为您无法屏蔽客户端，并获得生产类型打印所需的分辨率级别。 现代屏幕分辨率通常为100 ppi。 对于合适的印刷品，您确实需要3到6倍密度的东西。 否则你将有很多像素化，它出来时通常看起来像垃圾。

一个不同的答案：
最好的办法是利用SVG（可缩放矢量图形）之类的东西，并为浏览器提供一种绘图表面。 有几种方法可以使用Flash（Spreadshirt.com使用它）或Silverlight（不推荐）。 我们使用闪光灯，非常好。

您可能能够使用HTML 5.无论如何，您选择的任何路径都会变得复杂。

一旦用户对他们的绘图感到满意并想要将其打印出来，您就可以创建最终文件并运行一个过程将其转换为Postscript或您的T恤提供商所需的任何格式。 转换器（又名RIP软件）要么花费很长时间来开发，要么花费大量资金......选择一个。 （有用的提示：买它。当时，我们花了大约2万美元，它比试图开发便宜得多）。

当然，这忽略了诸如颜色匹配和校准之类的问题。 这实际上是我们的首要问题。 每个人的显示器略有不同，一台机器上的红色显示为另一台机器上的红色。

在一点背景下，我们正在做定制的包装纸。 用户添加了文本，从我们的库中选择了图像或上传了自己的图像，并选择了一个模式。 我们的打印件采用大幅面HP Inkjet打印机（36英寸和60英寸宽）。 最终，我们只花费了20亿到30万美元的资源才能实现这一目标......不幸的是，我们不得不卖出的价格点对于市场来说太高了。

Answer 2

如果您可以使用某些服务器端工具，请检查phantomjs 。 这是一个无头的webkit浏览器（没有gui）可以获取页面的截图，使用javascript api。 它应该做的伎俩。

Answer 3

我遇到的最佳选择是wkhtmltopdf 。 它附带了一个名为wkhtmltoimage的工具。 它使用QtWebKit（WebKit渲染引擎的Qt端口）来呈现网页，并将结果转换为您选择的PDF或图像格式，所有这些都在服务器端完成。

因为它使用WebKit，所以它就像现代浏览器一样呈现所有内容（图像，css甚至是javascript）。 在我的用例中，结果非常令人满意，几乎与浏览器呈现的内容完全相同。

首先，您可能想了解如何在.NET中运行外部工具： 使用C＃.NET执行外部EXE

Answer 4

使用ajax调用将包含用户生成内容的整个div发送回服务器。 使用“HtmlTextWriter”类在服务器上生成HTML文档。 然后，您可以使用外部工具转换该HTML文件

（1） http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot

（2） http://html-to-image.acasystems.com/faq-html-to-picture.htm

这些不是免费工具，但您可以通过在服务器上创建新的Process来使用它们。