将Div内容或画布保存为图像 [英] Saving Div Contents or Canvas as Image

查看:742
本文介绍了将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.

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

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/

还有一个类似的问题:
Screen Grab with PHP和/或Javascript?

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

这篇关于将Div内容或画布保存为图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆