Javascript 将 Div 内容或画布另存为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7339490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Saving Div Contents or Canvas as Image
提问by OneNerd
I have read a few similar questions and answers, but none completely address my issue.
我已经阅读了一些类似的问题和答案，但没有一个能完全解决我的问题。
Here is My Scenario:I have what is similar to a tinyMCE (a home-brew version though) kind of editor. It lets users enter some text, and an image or two, etc. I have code that takes the items in there and renders them into a smaller div (what is essentially a thumbnail) in real time.
这是我的场景：我有一个类似于 tinyMCE（虽然是自制版本）的编辑器。它允许用户输入一些文本和一两个图像等。我有代码可以将项目放入其中并将它们实时呈现到一个较小的 div（本质上是一个缩略图）中。
Here is What I Want to DoUltimately, the user may want to use their 'page' somewhere else, so I would like to let them go to a screen, view thumbnails of each page, and pick one.
这是我想要做的最终，用户可能想在其他地方使用他们的“页面”，所以我想让他们去一个屏幕，查看每个页面的缩略图，然后选择一个。
Here is the ProblemObviously, I could just use the same thumbnail code to render each page thumbnail. However, it can be bandwidth intensive (each page could have several images, not to mention the calculation would have to be performed many times - we are talking perhaps 40 to 50 thumbnails on a preview page).
这是问题显然，我可以使用相同的缩略图代码来呈现每个页面缩略图。然而，它可能是带宽密集型的（每个页面可能有多个图像，更不用说必须执行多次计算 - 我们在预览页面上讨论可能有 40 到 50 个缩略图）。
So, I wanted to try to take the thumbnail div, and somehow create a png or jpg when they save the page in the editor (so the code for the page, and also a thumbnail image), and push it up to my PHP script to save the image to the server.
所以，我想尝试获取缩略图 div，并在他们将页面保存在编辑器中时以某种方式创建一个 png 或 jpg（因此页面的代码，还有一个缩略图），并将其推送到我的 PHP 脚本中将图像保存到服务器。
My first thought was that maybe canvas could do that, but there is the issue of translating the text and images onto the canvas first, which may or may not be possible.
我的第一个想法是也许画布可以做到这一点，但是首先将文本和图像翻译到画布上存在问题，这可能可能也可能不可能。
So there it is. I am interested in any and all options, including commercial libraries if available that will do this -- only thing is, would like it to be in javascript.
所以就是这样。我对任何和所有选项都感兴趣，包括可以做到这一点的商业库（如果有的话）——唯一的问题是，希望它在 javascript 中。
回答by Serj Sagan
You may want to look at: http://html2canvas.hertzen.com/
你可能想看看：http: //html2canvas.hertzen.com/
A similar question was already asked: Screen Grab with PHP and/or Javascript?
已经有人问过类似的问题： Screen Grab with PHP and/or Javascript?
