Is there a simple way to save an HTML canvas stack for future manipulation?
I do not want to save the canvas as an image because I need to be able to edit the canvas at any time.
Ideally I would like to save the stack as a text file.
Canvas does not have any built in way to do this. You would have to write a custom layer in between your code and the canvas layer to track the state.
Off the top of my head, the Fabric canvas library has the ability to export the scene to JSON. See Element.toDatalessJSON() and Element.loadDatalessJSON(), which you can use on the root Fabric canvas element.
Related
I am trying to access the source code inside the canvas tag. Is it possible to get source code inside canvas tag?
You cannot get the source code from canvas element . You need to check the javascript to see what's going on in the canvas . Canvas is similar to board where you can draw anything with javascript .
The canvas element is part of HTML5 and allows for dynamic, scriptable
rendering of 2D shapes and bitmap images. It is a low level,
procedural model that updates a bitmap and does not have a built-in
scene graph
If you use Chrome you're in luck. It has an experimental feature for inspecting Canvas elements. So you can actually profile the canvas element and see step by step each call, and see a shot of the output of that call.
In chrome type chrome://flags/ into the URL and once the page loads, find "Enable Developer Tools experiments". Close out of Chrome and once you load it back up, in the inspector you will find a new option under Profiles for "Capture Canvas Frame". Run that and it will output a list of every call performed.
I learned about this through twitter and the following link, enjoy.
http://www.html5rocks.com/en/tutorials/canvas/inspection/
I am creating an app that capture the web-cam at a certain point(when an event is triggered), like taking a snapshot of the camera and encode the snapshot to base64. But looking at the example online, they first draw that snapshot to a canvas and then convert that canvas to base64. Is there a way to skip "drawing to canvas" part?
No, canvas is the only possible way to read pixels in a browser.
This is why the video stream must be drawn to the canvas first.
We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.
I am loading an image into an HTML 5 Canvas using drawImage method. How do I get a reference to that image later (maybe on some mouse-clicked event) so that I can do a transformation to the image (like rotation)?
Save a reference to the Image object you used to paint to the canvas.
Then,
Delete the canvas (clearRect)
Make the transformations using the canvas context
Draw the Image again
Go to 1 when you need to refresh the canvas
You can't. Once it's drawn on the canvas it's just pixels. No reference to the original source is retained by the canvas. If you want to maintain state information you have to do that yourself. Alternatively use SVG, that retains an internal DOM.
There is powerful HTMLLoader component for AIR wrapped in mx:HTML for Flex.
I want to supply images manually (ideally from bytes) for mx:HTML, which will display my generated content. The point is to pack all resources in the application without external files. I can pack different html pages in the app and switch them when mx:HTML dispatches Event.LOCATION_CHANGE. Now I want the same for images. What do you suggest?
Solved! Went through several stages:
Make HTMLLoader's background transparent with paintsDefaultBackground="false" and backgroundAlpha="0". Get notified of pictures location with javascript and draw them on HTMLLoader's graphics. This is complex and has problems with resizing (pictures get shifted), but was almost done...
Next idea - use <canvas> to draw images on them, sending data to javascript.
While reading canvas tutorials, stumbled upon data URI scheme, which does exactly what I needed in simplest possible way. Images are embedded in html page in base64 encoding.