diff --git a/README.md b/README.md index 3a8a562..849939f 100644 --- a/README.md +++ b/README.md @@ -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 \ No newline at end of file