I want to enable a user on a website to upload an image, and write some text over it. Also, they should be able to crop/scale/move the image and text. For that stuff, I can do it in jQuery.
After they've made the image the way they want it, is there a way i can take a screenshot of that image (using PiL) and save it on the server?
What is the best/proper way to do this?
I assume you got Python on the server side.
The best way imo is to somehow 'get' all the editing parameters from the client, then re-render it using PIL.
Update: How I will do it On the server side, you need an url to handle posts. On the client side, (after each edit, )send a post to that url, with the editing parameters. I think there is not an easy solution to this.
Maybe if you don't use PIL to render the final image, but only remember the parameters, each view from clients can render itself?
Taking a "screenshot" of the picture is neither the best, nor the proper way to do it. To take a screenshot, you need to execute code on the client machine, which is "not possible" in a website scenario.
Have a look at lolcat builder (I can't think of a more serious example right now ;). Everytime you click the "Preview" button, the image src is updated with an url containing the text, its style and position. The request is handled by the server which will generate a new picture to display.
PIL isn't available on the client side.. so unless, as Jack Ha suggests, you intend to upload all the instructions of your image editing to the server and re-execute them, it's not an option. I would shy away from this because you'd need to implement the same editing routines on both the client and the server, doubling the size of your code base. (Perhaps if your server-side code was written in Javascript it would make sense, so the drawing code could be reused.)
Instead, look into finding a Javascript library that does complete image manipulation client-side, and have the browser upload the final, edited image. I'm not familiar with the options in that area, but a quick Google search turned this up, which uses the canvas element to store the pixel data.
Well, even if others are trying to discourage you from doing this, it would probably not be that hard.
On the client-side, you, you define a div that is floated/resizable over the image, with transparency, that can be scaled for the crop.
Move, I assume it applies only to the text, so you dynamically create draggable spans on the client side, still easy.
Scale, I have no Idea of a simple UI to do it.
When you want to update your Image, you serialize your data (position of your cropping div and position of your text spans / scaling, relative to the position to the image.) Then, using json or anything similar you'd like, you transfer the data to the server.
Then, on the server, using python/PIL, you reproduce the transformations that you have serialized.