Adding some information about the CORS and the scal factor

This commit is contained in:
Adrian Cooney 2013-06-30 15:27:36 +01:00
parent 5fd625df9c
commit d1f9233a1f

View File

@ -6,8 +6,8 @@
![The demo](http://i.imgur.com/IYLD8pz.png)
## Usage
### console.snapshot( _<canvas>_ )
`console.snapshot` takes in a `HTMLCanvasElement`, base64 encodes it using `toDataURL` and then outputs it to the canvas using `console.image`.
### 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"),
@ -18,6 +18,7 @@ var canvas = document.createElement("canvas"),
// ...
console.snapshot(canvas);
console.snapshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size
```
### console.image( _<url>_ )
@ -27,4 +28,8 @@ console.snapshot(canvas);
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