mirror of
https://github.com/adriancooney/console.snapshot.git
synced 2025-12-08 21:26:19 +00:00
35 lines
1.7 KiB
Markdown
35 lines
1.7 KiB
Markdown
# console.snapshot( _canvas_ )
|
|
### Snapshot a canvas and output it to the console.
|
|
|
|
`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.
|
|
|
|
|
|
|
|
## 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.
|
|
|
|
```js
|
|
var canvas = document.createElement("canvas"),
|
|
ctx = canvas.getContext("2d");
|
|
|
|
// ...
|
|
//draw
|
|
// ...
|
|
|
|
console.snapshot(canvas);
|
|
console.snapshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size
|
|
```
|
|
|
|
### console.image( _<url>_ )
|
|
`console.image` outputs an image from a url into the console. See [console.image](http://github.com/dunxrion/console.image).
|
|
|
|
```js
|
|
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
|
|
This is what happens when you print non CORS enabled image on the canvas. The browser blocks the `toDataURL` function which is what `console.image` depends on 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 |