From 4029ba00de96ce9c1f320c914b857fbeb9795427 Mon Sep 17 00:00:00 2001
From: Hans Chan <chenhc@ucweb.com>
Date: Thu, 6 Aug 2015 18:27:46 +0800
Subject: [PATCH] add method .resize2Canvas

---
 README.md          | 10 +++++++++-
 bower.json         |  2 +-
 example/example.js | 17 ++++++++++++++---
 index.js           | 37 +++++++++++++++++++++++++++----------
 package.json       |  2 +-
 5 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index b375b4f..5da55c8 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,17 @@ img.onload= function () {
 img.src = url; // local image url
 ```
 
+### .resize2Canvas(img, width, height)
+
+resize an <img> or Image or <canvas> to canvas
+
+- {Image}  img:    an <img> or Image()
+- {number} width:  output image width
+- {number} height: output image height
+
 ### .resize(img, width, height, type)
 
-resize an <img> or Image to base64
+resize an <img> or Image or <canvas> to base64
 
 - {Image}  img:    an <img> or Image()
 - {number} width:  output image width
diff --git a/bower.json b/bower.json
index d08efdd..7e02ca8 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "resize-image",
   "main": "index.js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "homepage": "https://github.com/csbun/resize-image",
   "authors": [
     "Hans Chan <icsbun@gmail.com>"
diff --git a/example/example.js b/example/example.js
index cc69693..3a5deac 100644
--- a/example/example.js
+++ b/example/example.js
@@ -17,14 +17,25 @@ function resize(url, type) {
 }
 
 // resize an <img> to jpeg
-// this png comes from https://www.google.com/images/srpr/logo11w.png 
+// this png comes from https://www.google.com/images/srpr/logo11w.png
 resize('/google.png', resizeImage.JPEG);
 
 
-// resize an <input type="file"> to  webp
+// resize an <input type="file"> to canvas
 var fr = new FileReader();
 fr.onload = function () {
-  resize(fr.result, resizeImage.WEBP);
+  var img = new Image();
+  img.onload= function () {
+    var canvas = resizeImage.resize2Canvas(img, 200, 100);
+    display.appendChild(canvas);
+    // resize canvas to a smaller PNG data
+    var data = resizeImage.resize(canvas, 100, 50, resizeImage.PNG);
+    var smallImg = new Image();
+    display.appendChild(smallImg);
+    smallImg.src = data;
+  };
+  display.appendChild(img);
+  img.src = fr.result;
 };
 
 var input = document.getElementById('input-file');
diff --git a/index.js b/index.js
index ffcb63c..0828328 100644
--- a/index.js
+++ b/index.js
@@ -29,20 +29,16 @@
   }
 
   /**
-   * resize an <img> to base64
-   * @param  {Image}  img    an <img> or Image()
+   * resize an <img> or <canvas> to canvas
+   * @param  {Image}  img    an <img> or Image() or <canvas>
    * @param  {number} width  output image width
    * @param  {number} height output image height
-   * @param  {string} type   output image type
-   * @return {string}        output image base64 string
+   * @return {Canvas}        output image canvas
    */
-  out.resize = function resize(img, width, height, type) {
+  function resize2Canvas(img, width, height) {
     if (!img || !width) {
       return img;
     }
-    if (IMG_TYPE.indexOf(type) < 0) {
-      type = IMG_TYPE_PNG;
-    }
     height = height || width;
     // 按原图缩放
     var detImg = img.width / img.height;
@@ -56,11 +52,32 @@
     canvas.width = width;
     canvas.height = height;
     var ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas;
+  }
+  out.resize2Canvas = resize2Canvas;
+
+  /**
+   * resize an <img> or <canvas> to base64
+   * @param  {Image}  img    an <img> or Image() or <canvas
+   * @param  {number} width  output image width
+   * @param  {number} height output image height
+   * @param  {string} type   output image type
+   * @return {string}        output image base64 string
+   */
+  out.resize = function resize(img, width, height, type) {
+    if (IMG_TYPE.indexOf(type) < 0) {
+      type = IMG_TYPE_PNG;
+    }
+    var canvas = resize2Canvas(img, width, height);
+    var ctx = canvas.getContext('2d');
+    // set backgrund color to #fff while output type is NOT PNG
     if (type !== IMG_TYPE_PNG) {
+      ctx.globalCompositeOperation = 'destination-over';
       ctx.fillStyle = '#fff';
-      ctx.fillRect(0, 0, width, height);
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.globalCompositeOperation = '';
     }
-    ctx.drawImage(img, 0, 0, width, height);
     return canvas.toDataURL('image/' + type);
   };
 
diff --git a/package.json b/package.json
index adaf6aa..a2b6908 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "resize-image",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Resize images in browser using canvas",
   "main": "index.js",
   "scripts": {},