将 Div 内容或画布另存为图像

问题描述

我已经阅读了一些类似的问题和答案，但没有一个能完全解决我的问题.

I have read a few similar questions and answers, but none completely address my issue.

这是我的场景:我有一个类似于 tinyMCE(虽然是自制版本)的编辑器.它允许用户输入一些文本和一两个图像等.我有代码可以将项目放入其中并将它们实时呈现到一个较小的 div(本质上是一个缩略图)中.

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.

这是我想做的事情最终，用户可能想在其他地方使用他们的页面"，所以我想让他们去一个屏幕，查看每个页面的缩略图，然后选择一个.

Here is What I Want to Do Ultimately, 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.

问题来了显然，我可以使用相同的缩略图代码来呈现每个页面缩略图.但是，它可能会占用大量带宽(每个页面可能有多个图像，更不用说必须执行多次计算——我们说的是预览页面上可能有 40 到 50 个缩略图).

Here is the Problem Obviously, 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).

所以，我想尝试获取缩略图 div，并在他们将页面保存在编辑器中时以某种方式创建一个 png 或 jpg(因此页面的代码，还有一个缩略图)，并将其推到我的 PHP 脚本将图像保存到服务器.

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.

我的第一个想法是也许画布可以做到这一点，但是首先将文本和图像翻译到画布上存在问题，这可能也可能不可能.

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.

原来如此.我对任何和所有选项都感兴趣，包括可以做到这一点的商业库(如果有的话)——唯一的问题是，希望它在 javascript 中.

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.

推荐答案

您可能需要查看:http://html2canvas.hertzen.com/

已经有人问过类似的问题:使用 PHP 和/或 Javascript 进行屏幕抓取?

A similar question was already asked: Screen Grab with PHP and/or Javascript?

这篇关于将 Div 内容或画布另存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！