Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 7a74ca85c3b4fabcfed58a5c4abb805e732a5a7e @tj tj committed Aug 9, 2012
Showing with 149 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +1 −0 .npmignore
  3. 0 History.md
  4. +8 −0 Makefile
  5. +36 −0 Readme.md
  6. +60 −0 index.js
  7. +11 −0 package.json
  8. +30 −0 test/index.html
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
@@ -0,0 +1 @@
+test
No changes.
@@ -0,0 +1,8 @@
+
+test/out.js: index.js
+ component build package.json test/out
+
+clean:
+ rm -f test/out.{js,css}
+
+.PHONY: clean
@@ -0,0 +1,36 @@
+
+# Thumb
+
+ Scale an image or data uri within the given dimensions.
+
+## Installation
+
+```
+$ npm install thumb-component
+```
+
+## Example
+
+```js
+var thumb = require('thumb');
+var input = document.querySelector('input');
+
+input.onchange = function(e){
+ var reader = new FileReader;
+
+ reader.onload = function(){
+ var img = thumb(reader.result);
+ document.body.appendChild(img);
+ document.body.appendChild(thumb(img, 100, 100));
+ document.body.appendChild(thumb(img, 100, 50));
+ document.body.appendChild(thumb(img, 50, 100));
+ document.body.appendChild(thumb(img, 25));
+ };
+
+ reader.readAsDataURL(input.files[0]);
+};
+``
+
+## License
+
+ MIT
@@ -0,0 +1,60 @@
+
+/**
+ * Expose `thumb()`.
+ */
+
+module.exports = thumb;
+
+/**
+ * Scale `img` to fit within `width` / `height`
+ * and return `Image`.
+ *
+ * @param {String|Image} img or data uri
+ * @param {Number} width [200]
+ * @param {Number} height [200]
+ * @return {Image}
+ * @api public
+ */
+
+function thumb(img, width, height) {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
+ width = width || 200;
+ height = height || width || 200;
+
+ img = 'string' == typeof img
+ ? fromURI(img)
+ : img;
+
+ var ratio = img.width / width > img.height / height
+ ? img.width / width
+ : img.height / height;
+
+ if (ratio > 1) {
+ width = Math.ceil(img.width / ratio);
+ height = Math.ceil(img.height / ratio);
+ } else {
+ width = img.width;
+ height = img.height;
+ }
+
+ canvas.width = width;
+ canvas.height = height;
+ ctx.drawImage(img, 0, 0, width, height);
+
+ return fromURI(canvas.toDataURL());
+}
+
+/**
+ * Return `Image` from data uri `str`.
+ *
+ * @param {String} str
+ * @return {Image}
+ * @api private
+ */
+
+function fromURI(str) {
+ var img = new Image
+ img.src = str;
+ return img;
+}
@@ -0,0 +1,11 @@
+{
+ "name": "thumb-component",
+ "description": "Canvas thumbnail generator",
+ "version": "0.0.1",
+ "keywords": ["thumb", "thumbnail", "image"],
+ "component": {
+ "scripts": {
+ "thumb/index.js": "index.js"
+ }
+ }
+}
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Thumb</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" href="out.css" />
+ </head>
+ <body>
+ <input type="file" name="file">
+ <script src="out.js"></script>
+ <script>
+ var thumb = require('thumb');
+ var input = document.querySelector('input');
+ input.onchange = function(e){
+
+ var reader = new FileReader;
+ reader.onload = function(){
+ var img = thumb(reader.result);
+ document.body.appendChild(img);
+ document.body.appendChild(thumb(img, 100, 100));
+ document.body.appendChild(thumb(img, 100, 50));
+ document.body.appendChild(thumb(img, 50, 100));
+ document.body.appendChild(thumb(img, 25));
+ };
+
+ reader.readAsDataURL(input.files[0]);
+ };
+ </script>
+ </body>
+</html>

0 comments on commit 7a74ca8

Please sign in to comment.