Subscribe
So you've created a masterpiece using the canvas element, making sexy boxes, polygons and lines, and now you want to save your piece of art.
- but there's no "Save as..." option when you right click. Bugger. Enter Canvas2Image!
Luckily, it turns out we can use the toDataURL() method, data: URI's and a bit of Javascript to allow saving the canvas image.
Canvas2Image is a little library which can be used to easily either save the canvas as PNG, JPEG or BMP, or create an image element with the image data. PNG is supported by Firefox, Opera and Safari with the latest WebKit nightly. JPEG is only available in Firefox.
BMP is not natively supported in any of the browsers, so to make things more interesting, we have implemented our own BMP function which will read the raw canvas pixel data using getImageData(), setup a simple BMP file structure in Javascript, base64 encode it and stick it in a data: uri.
Demo here: http://www.nihilogic.dk/labs/canvas2image/
15 comments:
Cool. Do you know if something similar is possible for SVG or VML?
/ Fredrik
No, I don't think it is. Would be neat if it was, though, then excanvas could be made saveable too.
Ok. I guess you could technically/theoretically write an SVG parser & renderer that outputted base64 ;)
/ Fredrik
SVG 1.1 requires UAs to support SVG in (x)HTML Image Element. There it is straightfoward to draw an SVG element onto a Canvas using CanvasContext.drawImage( SVGElement, 0, 0 );
Seeing how much SVG implementors choke on the spec and get it wrong, you probably don't want to implement your own interpreter ;)
Hi... Really cool stuff.... Do you think it's possible to define different brushes eg. from images or vector data?
@anon: Sure. The drawing part was just done for giggles and not to make a real drawing app, as this is more about saving images than drawing.
I'm sure there are better and nicer canvas paint applications out there.
If you combine this with http://fuchsia-design.com/CanvaSVG/, you effectively have a way to convert SVG to Canvas to Bitmap.
Example: http://antimatter15.110mb.com/misc/svg2bitmap/index.xhtml
@anon: Grafio's Artist's Sketchbook is a nice Canvas based drawing widget.
In OSX, when downloading these files, the suffix appended is .exe... which is kinda confusing for the user. Changing it to "image/octet-stream" seems to work. But maybe that's completely invalid.
@mud: Thanks, I'll try and change that.
What would be cool if you could somehow add this to a web-form and submit the image to the server... that would be possible not?
Just send the imagedata to the server... dman that would be cool. Users can add self-drawn-images instead of plain text. always funny
I only need a simple canvas-paint / editor now..
Couldn't you go one step further and perform the conversion on right mouse click, and then reset when the context menu is dismissed? Then you eliminate an extra step for the user, and it looks like you can saveAs a canvas.
Someone needs to put this image saving capability together with something like http://mynichecomputing.org/sharedDraw/ using mySQL database for storage and get a super modified version of this shared whiteboard program. Get your own copy of the complete kit of source code for this here: http://mynichecomputing.org/roughDrawKit.zip Let me know at lorlar AT gmail dot com if you do this just-proposed version
@lorlarz: Anyone is free to take the code and use it (it's MIT licensed) for whatever. I don't have time right now to work more on this, though.
so, can we save the canvas on a server directory (777)?
Post a Comment