archive-gh-me/console.snapshot
1
0
Fork 0
mirror of https://github.com/adriancooney/console.snapshot.git synced 2025-12-08 21:26:19 +00:00
Code Issues Projects Releases Wiki Activity

Updated the docs

Browse Source
This commit is contained in:
Adrian Cooney 2013-07-01 02:48:08 +01:00
parent 1deb17bf2a
commit b2d8e25a31
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -1,13 +1,24 @@
# console.snapshot( _canvas_ )
### Snapshot a canvas and output it to the console.
### A simple canvas profiler
`console.snapshot` takes and inputted _<canvas>_ element and outputs a snapshot of it into the console. It makes debugging the canvas a little less dramatic. See [this demo](http://dunxrion.github.io/console.snapshot). `console.snapshot` is a fork of the [`console.image`](http://github.com/dunxrion/console.image) and actually does something useful.
![The demo](http://i.imgur.com/IYLD8pz.png)
## Usage
### console.snapshot( _<canvas>_ [, _<scale>_ ] )
`console.snapshot` takes in a `HTMLCanvasElement`, base64 encodes it using `toDataURL` and then outputs it to the canvas using `console.image`. You can also pass along an optional scale factor to scale down the outputted image for better viewing within the Dev tools.
### console.snapshot( _<canvas>_ )
`console.snapshot` profiles a canvas for 1 iteration in the browser render loop or for one `requestAnimationFrame` tick and outputs the canvas context call stack and state changes to the console.
```js
var canvas = document.getElementById("canvas");
console.snapshot(canvas);
```
![Sample output](http://i.imgur.com/CCO85C5.png);
### console.screenshot( _<canvas>_ [, _<scale>_ ] )
`console.screenshot` takes in a `HTMLCanvasElement`, base64 encodes it using `toDataURL` and then outputs it to the canvas using `console.image`. You can also pass along an optional scale factor to scale down the outputted image for better viewing within the Dev tools.
```js
var canvas = document.createElement("canvas"),
@ -17,8 +28,8 @@ var canvas = document.createElement("canvas"),
//draw
// ...
console.snapshot(canvas);
console.snapshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size
console.screenshot(canvas);
console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size
```
### console.image( _<url>_ )
@ -29,7 +40,7 @@ console.image("http://i.imgur.com/wWPQK.gif");
```
## Troubleshooting
#### I'm getting "Uncaught Error: SecurityError: DOM Exception 18" when I try to snapshot the canvas
##### I'm getting "Uncaught Error: SecurityError: DOM Exception 18" when I try to snapshot the canvas.
This is caused by printing a non CORS-enabled image on the canvas. The browser blocks the `toDataURL` function which is what `console.image` depends on to print the canvas. To fix this, see [this tutorial on HTML5Rocks](http://www.html5rocks.com/en/tutorials/cors/) or consider passing your image through a CORS proxy such as [corsproxy.com](http://corsproxy.com).
License: MIT