c# - 在 ASP.net 中获取 div 的图像

Question

我正在尝试制作 T 恤设计网站。用户通过将不同的 div 和图像放在背景中有 t 恤的 t 恤 div 上来自定义其 t 恤，现在在最终自定义之后，我想保存 t 恤/div 的图片，以便保存自定义。

如何将自定义 div 保存到图像中？

Answer 1

您可以使用 html2canvas 库，它可以渲染到“画布”您的 div，然后将其图像发送回给您。

您可以获取代码，并在此处查看示例。

http://html2canvas.hertzen.com/

这是从画布到图像的转换以将其取回： http ://www.nihilogic.dk/labs/canvas2image/

我的担忧。如果出现 javascript 错误并且用户丢失了什么是什么？如果用户不使用可以处理“画布”的新现代浏览器怎么办，以便可以将 div 内的内容呈现为图像。

另一种方法是使用闪存和在闪存上进行一些编程。

Answer 2

理想情况下，您将希望使用服务器端处理来生成图像，而不是基于 DOM 的方法。您可能需要考虑使用 GDI+。这些方面的内容应该可以帮助您入门（假设是 ASP.NET 页面的上下文）：

tshirt.aspx

var imagePath1 = @"C:\path\to\tshirt.jpg";
var imagePath2 = @"C:\path\to\graphic.jpg";

var bg = new Bitmap(imagePath1); 
var overlay = new Bitmap(imagePath2);

var gfx = Graphics.FromImage(bg);

gfx.DrawImage(overlay, new Point(50, 50));

Response.ContentType="image/jpeg"

bg.Save(Response.OutputStream, ImageFormat.Jpeg);

然后在需要图片的页面上：

<img src="tshirt.aspx" />

对“tshirt.aspx”使用上面相同的代码，您可以将调用替换为bg.Save(Stream, ImageFormat)以bg.Save(filePath, ImageFormat)将生成的图像写入磁盘。