我正在努力制作T恤设计网站。用户通过在最终定制后使用jquery在背景中使用t恤在背景上放置不同的div和图像来定制其T恤,我想保存T恤/ div的图片以便我可以保存自定义。
如何将自定义div保存到图像中?
答案 0 :(得分:1)
您可以使用html2canvas库来渲染“画布”你的div,然后让它将图像发送回给你。
您可以获取代码,并在此处查看示例。
http://html2canvas.hertzen.com/
以下是从画布到图像的转换以获取它: http://www.nihilogic.dk/labs/canvas2image/
我的担忧。 如果出现javascript错误并且用户丢失了什么原因怎么办? 如果用户不使用可以处理“画布”的新现代浏览器,以便可以渲染到div中的图像,该怎么办?
另一种方法是在闪光灯上使用闪光灯和一些编程。
答案 1 :(得分:0)
理想情况下,您希望使用服务器端处理来生成图像,而不是基于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)
,将生成的图像写入磁盘。