Permalink
Browse files

docs

  • Loading branch information...
1 parent 5cb5381 commit 69f0bd959e405d221e3da87f1917ca1896da564d @tj committed Dec 18, 2011
Showing with 58 additions and 0 deletions.
  1. +58 −0 Readme.md
View
@@ -37,6 +37,64 @@ colors.forEach(function(color){
$ ./test examples/cat.jpg && open /tmp/out.png
```
+## Full example
+
+ This is the contents of `./test`. The means of loading the image data and drawing it to the Canvas is up to you, they could be from a database, the file system, fetched from the web, however here we simply use `img.src = path`.
+
+```js
+#!/usr/bin/env node
+
+var palette = require('./')
+ , fs = require('fs')
+ , Canvas = require('canvas')
+ , Image = Canvas.Image
+ , canvas = new Canvas
+ , ctx = canvas.getContext('2d')
+ , path = process.argv[2]
+ , out = '/tmp/out.png';
+
+if (!path) {
+ console.error('Usage: test <image>');
+ process.exit(1);
+}
+
+var img = new Image;
+
+img.onload = function(){
+ canvas.width = img.width;
+ canvas.height = img.height + 50;
+ ctx.fillStyle = 'white';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(img, 0, 0);
+ paintPalette();
+ save();
+};
+
+img.src = path;
+
+function paintPalette() {
+ var x = 0;
+ var colors = palette(canvas);
+ colors.forEach(function(color){
+ var r = color[0]
+ , g = color[1]
+ , b = color[2]
+ , val = r << 16 | g << 8 | b
+ , str = '#' + val.toString(16);
+
+ ctx.fillStyle = str;
+ ctx.fillRect(x += 31, canvas.height - 40, 30, 30);
+ });
+}
+
+function save() {
+ fs.writeFile(out, canvas.toBuffer(), function(err){
+ if (err) throw err;
+ console.log('saved %s', out);
+ });
+}
+```
+
## Booyah
![learnboost](http://f.cl.ly/items/3K3C1Z1006083Q00231q/Grab.png)

0 comments on commit 69f0bd9

Please sign in to comment.