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

时间:2012-01-18 14:48:00

标签: javascript jquery asp.net vb.net

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

我被困在一个重要的舞台上!

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

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

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

这在.NET中是否可行?

也许用javascript可以做些什么?

任何有关正确方向的帮助或指导都将不胜感激!

编辑:

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

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

4 个答案:

答案 0 :(得分:3)

大约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万美元的资源才能实现这一目标......不幸的是,我们不得不卖出的价格点对市场来说太高了。

答案 1 :(得分:2)

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

答案 2 :(得分:1)

使用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来使用它们。

答案 3 :(得分:1)

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

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

首先,您可能想了解如何在.NET中运行外部工具: Execute an external EXE with C#.NET