add method .resize2Canvas

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

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>"

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');

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);
   };
 

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": {},