Question

我正在努力制作T恤设计网站。用户通过在最终定制后使用jquery在背景中使用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" />

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

在ASP.net中获取div的图像

2 个答案: