Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add a callback

  • Loading branch information...
commit 132a7f592d6c6f336ba68fc65fc1378676ab3b5c 1 parent 8a5d241
@tj tj authored
Showing with 43 additions and 40 deletions.
  1. +3 −6 Readme.md
  2. +34 −28 index.js
  3. +6 −6 test/index.html
View
9 Readme.md
@@ -21,12 +21,9 @@ 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));
+ thumb(reader.result, 200, 200, function(err, img){
+ document.body.appendChild(img);
+ });
};
reader.readAsDataURL(input.files[0]);
View
62 index.js
@@ -7,54 +7,60 @@ module.exports = thumb;
/**
* Scale `img` to fit within `width` / `height`
- * and return `Image`.
+ * and and invoke `fn(err, img)`.
*
* @param {String|Image} img or data uri
- * @param {Number} width [200]
- * @param {Number} height [200]
- * @return {Image}
+ * @param {Number} width
+ * @param {Number} height
+ * @param {Function} fn
* @api public
*/
-function thumb(img, width, height) {
+function thumb(img, width, height, fn) {
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);
+ if ('string' == typeof img) {
+ fromURI(img, resize);
} else {
- width = img.width;
- height = img.height;
+ resize(img);
}
- canvas.width = width;
- canvas.height = height;
- ctx.drawImage(img, 0, 0, width, height);
+ function resize(err, img) {
+ if (err) return fn(err);
+
+ var ratio = img.width / width > img.height / height
+ ? img.width / width
+ : img.height / height;
- return fromURI(canvas.toDataURL());
+ 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);
+
+ fromURI(canvas.toDataURL(), fn);
+ }
}
/**
- * Return `Image` from data uri `str`.
+ * Return `Image` from data uri `str`
+ * and invoke `fn(err, img)`.
*
* @param {String} str
- * @return {Image}
+ * @param {Function} fn
* @api private
*/
-function fromURI(str) {
+function fromURI(str, fn) {
var img = new Image
+ img.onerror = fn;
+ img.onload = function(e){ fn(null, img) };
img.src = str;
- return img;
}
View
12 test/index.html
@@ -15,12 +15,12 @@
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));
+ var start = new Date;
+ thumb(reader.result, 200, 200, function(err, img){
+ if (err) throw err;
+ console.log('resized in %dms', new Date - start);
+ document.body.appendChild(img);
+ });
};
reader.readAsDataURL(input.files[0]);
Please sign in to comment.
Something went wrong with that request. Please try again.