resize-image - npm Package Compare versions

Comparing version 0.0.2 to 0.0.4

bower.json

 {
   "name": "resize-image",
   "main": "index.js",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "homepage": "https://github.com/csbun/resize-image",
   "authors": [
-    "Hans Chan <[e-mail]>"
+    "Hans Chan <[e-mail]>"
   ],
@@ -9,0 +9,0 @@ "description": "Resize images in browser using canvas",

example/example.js

@@ -20,10 +20,21 @@ var resizeImage = require('../index');
 // 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;
 };
@@ -30,0 +41,0 @@

index.js

 (function(root, factory) {
   'use strict';
-  console.log(exports);
   if (typeof exports === 'object') {
@@ -21,3 +20,3 @@ // CommonJS
   }
-}(this, function () {
+})(this, function () {
   'use strict';
@@ -34,16 +33,12 @@ var out = {};
   /**
-   * 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;
@@ -62,7 +57,28 @@ // 按原图缩放
     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);
@@ -72,2 +88,2 @@ };
   return out;
-}));
+});

package.json

 {
   "name": "resize-image",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Resize images in browser using canvas",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -31,5 +31,13 @@ # resize-image
 
+### .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
 
@@ -36,0 +44,0 @@ - {Image}  img:    an <img> or Image()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22530

increased by5.72%

Lines of code

169

increased by18.18%

Number of lines in readme file

59

increased by15.69%

No dependency changes