使用PiL截取HTML / CSS的截图

时间:2009-03-23 15:00:51

标签: jquery python css xhtml python-imaging-library

我想让网站上的用户上传图片,并在上面写一些文字。此外,他们应该能够裁剪/缩放/移动图像和文本。对于那些东西,我可以在jQuery中完成。

在他们按照他们想要的方式制作图像后,有没有办法可以截取该图像(使用PiL)并将其保存在服务器上?

这样做的最佳/正确方法是什么?

4 个答案:

答案 0 :(得分:2)

拍摄照片的“截图”既不是最好的,也不是正确的方法。要截取屏幕截图,您需要在客户端计算机上执行代码,这在网站方案中是“不可能的”。

看看lolcat builder(我现在想不出一个更严肃的例子;)。每次单击“预览”按钮时,图像src都会更新为包含文本,样式和位置的URL。该请求由服务器处理,该服务器将生成要显示的新图片。

答案 1 :(得分:1)

我假设你在服务器端有Python。

imo的最佳方式是以某种方式从客户端“获取”所有编辑参数,然后使用PIL重新渲染它。

更新:我将如何做到这一点 在服务器端,您需要一个URL来处理帖子。 在客户端,(在每次编辑之后)使用编辑参数向该URL发送帖子。 我认为没有一个简单的解决方案。

也许如果您不使用PIL渲染最终图像,但只记住参数,客户端的每个视图都可以呈现自己?

答案 2 :(得分:0)

PIL在客户端不可用..所以除非像Jack Ha建议的那样,你打算将所有图像编辑指令上传到服务器并重新执行它们,否则它不是一个选项。我会回避这个,因为你需要在客户端和服务器上实现相同的编辑例程,使代码库的大小加倍。 (也许如果你的服务器端代码是用Javascript编写的,那就有意义了,所以可以重用绘图代码。)

相反,寻找一个Javascript库来完成客户端的图像处理,并让浏览器上传最终的编辑图像。我不熟悉该领域的选项,但是快速谷歌搜索turned this up,它使用canvas元素存储像素数据。

答案 3 :(得分:0)

好吧,即使其他人试图阻止你这样做,也可能不会那么难。

在客户端,您可以定义一个在图像上浮动/可调整大小的div,具有透明度,可以为裁剪缩放。

移动,我认为它仅适用于文本,因此您可以在客户端动态创建可拖动的跨度,仍然很容易。

缩放,我不知道如何使用简单的UI。

当你想要更新你的图像时,你序列化你的数据(裁剪div的位置和文本跨度/缩放的位置,相对于图像的位置。)然后,使用json或类似的任何你喜欢的,您将数据传输到服务器。

然后,在服务器上,使用python / PIL,重现已序列化的转换。