在Python / Web中提供动态图像的正确方法。使用PIL

Question

I need to have a Python file act as if it's an image. ie The path to the Python file will be used inside an tag of a web page. The Python file will dynamically create an image using PIL (no intermediate save to file).

I'm using Python 2.7, Web.Py, & PIL, and developing on 32-Bit Windows XP, using WAMPSS web server, and using the latest Chrome.

I'm almost there. I think.

Here's a cut down example of my python image file:

#!/home/bin/python
# #############################################################################
import web, sys
from PIL import Image, ImageDraw, ImageFont
# #############################################################################
class debug:
    def GET(self):
        # drawing with PIL (Python Image Library)
        # create a new 256x256 pixel image surface (default is black bg)
        img = Image.new("RGB", (256, 256))
        # set up the new image surface for drawing
        draw = ImageDraw.Draw (img)
        # REMOVED - Image manipulation
        # Output the image to the browser
        sys.stdout.write('Status: 200 OK\r\n')
        sys.stdout.write('Content-type: image/png\r\n')
        sys.stdout.write('\r\n')
        img.save(sys.stdout, "PNG")
# #############################################################################
urls = ( '/debug.py', 'debug' )
app = web.application(urls, globals())
if __name__ == "__main__":
    app.run()
# #############################################################################

Now, this works... Kinda.

If I view this file directly in a browser (local AMPSS server), it shows the image. But, it takes a long time to display/server (5+ seconds) compared to a similar 1k PNG image. And Chrome console says it failed (although I can see the image)

I think the browser is expecting something else that I'm not sending?

The real problem materialized when I use this image in JQuery and the OnLoad event. Things then became ...strange... for want of a better word. I appear to have events (not mine) fire that clear the image many seconds after it has been loaded & displayed.

The Chrome Console says that the GET fails when retrieving the image (although it does display the image, at least until something in JS makes it vanish again!)

Interestingly, this issue doesn't seem to appear in latest Firefox. The loading time is exaggerated in the latest Opera, but the JS doesn't glitch the image. The same in IE8

To confuse things even more, I have two Windows XP (32-bit) dev machines. The JS glitching doesn't happen on one of the them. And Chrome Console doesn't list any faults!

I've put a demo on the image file online here: LINKY And my in development page that uses this file here: LINKY The Jquery/JS will activate if you click around the white image-holders.

I have no idea if this will work on your setup or not. I'm just linking here for completeness.

Any ideas on what I'm missing?

Answer 1

In web.py you should return contents that have to be sent to the browser. Also use web.header to set HTTP header.

Save image to StringIO and return its contents:

import StringIO

# in GET(self):
web.header('Content-type', 'image/png')
buf = StringIO.StringIO()
img.save(buf, "PNG")
contents = buf.getvalue()
return contents