Saving a rasterisation of a canvas element, server side
I've built a page which uses some jQuery, and Raphael (vectors and ima开发者_运维知识库ges on canvas), to allow a user to customise a picture by choosing a few colors. The whole canvas can be recreated on the client side by being initialized with an array of simple arguments like:
initCanvas({
'wall' : 'green',
'ceiling' : 'black',
'floor' : 'white'
})
So anything a user created could be recreated easily.
Is it possible get the server to render and save this canvas as an image?
Any suggestions to point me in the right direction would be great.
The guys from LearnBoost has a canvas implementation for NodeJS.
http://www.learnboost.com/introducing-node-canvas-server-side-html5-canvas-api/
Using nodejs and node-canvas you can generate the image using canvas on the server side and stream it back to the user.
It appears as though this would be a good solution to your problem: http://www.benbarnett.net/2010/06/04/export-svg-from-raphael-js-to-create-a-png-bitmap/
First send it to the server via JSON.
Once there you can go two routes.
- Render it via Batik (easy if you have a java server but becomes painful if running php) or
- Send it to ImageMagik.
精彩评论