canvas-compress - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

bower.json

 {
   "name": "canvas-compress",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "image compress with canvas",
@@ -5,0 +5,0 @@ "main": "dist/canvas-compress.js",

dist/canvas-compress.js

@@ -1,1 +0,1 @@
-!function(e,t){"function"==typeof define&&define.amd?define(["exif-js"],t):"object"==typeof exports?module.exports=t(require("exif-js")):e.CanvasCompress=t(e.EXIF)}(this,function(e){"use strict";function t(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){var r=e.width,i=e.height;switch(t){case 1:return{width:r,height:i,matrix:[1,0,0,1,0,0]};case 2:return{width:r,height:i,matrix:[-1,0,0,1,r,0]};case 3:return{width:r,height:i,matrix:[-1,0,0,-1,r,i]};case 4:return{width:r,height:i,matrix:[1,0,0,-1,0,i]};case 5:return{width:i,height:r,matrix:[0,1,1,0,0,0]};case 6:return{width:i,height:r,matrix:[0,1,-1,0,i,0]};case 7:return{width:i,height:r,matrix:[0,-1,-1,0,i,r]};case 8:return{width:i,height:r,matrix:[0,-1,1,0,0,r]}}}var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),a=window.URL||window.webkitURL,h=Math.log(2),u=4,s=.9,c="image/jpeg",f={width:1e3,height:618},g={_Promise:window.Promise,get Promise(){if("function"!=typeof this._Promise)throw new Error("canvas-compress requires Promise");return this._Promise},set Promise(e){if("function"!=typeof e)throw new TypeError("Promise should be a function");this._Promise=e}},l=function d(){var e=this;r(this,d),this.promise=new g.Promise(function(t,r){e.resolve=t,e.reject=r})},m=function(){function m(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.type,i=void 0===t?c:t,n=e.width,o=void 0===n?f.width:n,a=e.height,h=void 0===a?f.height:a,u=e.quality,g=void 0===u?s:u;r(this,m),g=parseFloat(g);var l={width:parseFloat(o),height:parseFloat(h)};Object.defineProperties(this,{outputType:{get:function(){return i}},outputSize:{get:function(){return l}},outputQuality:{get:function(){return g}}})}return o(m,null,[{key:"usePromise",value:function(e){g.Promise=e}}]),o(m,[{key:"_getOriginalImage",value:function(e){var t=a.createObjectURL(e),r=new Image,i=new l;return r.onload=function(){i.resolve(r)},r.onerror=function(){i.reject("image load error")},r.src=t,i.promise}},{key:"_drawOriginalImage",value:function(r){var n=document.createElement("canvas"),o=n.getContext("2d"),h=new l;return e.getData(r,function(){var u=e.getTag(r,"Orientation")||1,s=i(r,u),c=s.width,f=s.height,g=s.matrix;n.width=c,n.height=f,o.save(),o.transform.apply(o,t(g)),o.drawImage(r,0,0),o.restore(),a.revokeObjectURL(r.src),h.resolve(n)}),h.promise}},{key:"_resizeImage",value:function(e){var t=this.outputSize,r=e.width,i=e.height,n=Math.min(1,t.width/r,t.height/i);return g.Promise.resolve({source:e,scale:n})}},{key:"_drawImage",value:function(e){var t=e.source,r=e.scale;if(1===r)return g.Promise.resolve(t);var i=t.getContext("2d"),n=Math.min(u,Math.ceil(1/r/h)),o=Math.pow(r,1/n),a=document.createElement("canvas"),s=a.getContext("2d"),c=t.width,f=t.height;a.width=c,a.height=f;for(var l=0;;l++){var m=c*o|0,d=f*o|0,w=void 0,p=void 0;if(l%2===0?(w=t,p=s):(w=a,p=i),p.clearRect(0,0,c,f),p.drawImage(w,0,0,c,f,0,0,m,d),c=m,f=d,l===n){var v=w===t?a:t,y=p.getImageData(0,0,c,f);return v.width=c,v.height=f,p.putImageData(y,0,0),g.Promise.resolve(v)}}}},{key:"_compress",value:function(e){var t=this.outputType,r=this.outputQuality,i=e.width,n=e.height,o=e.toDataURL(t,r),a=atob(o.split(",")[1]).split("").map(function(e){return e.charCodeAt(0)}),h=new Blob([new Uint8Array(a)],{type:t});return g.Promise.resolve({blob:h,width:i,height:n})}},{key:"process",value:function(e){if(!e)return g.Promise.reject(new ReferenceError("file blob is required"));if(!e.type.match(/^image/))return g.Promise.reject(new TypeError("unsupport file type: "+e.type));var t={};return this._getOriginalImage(e).then(function(e){return t.width=e.width,t.height=e.height,e}).then(this._drawOriginalImage.bind(this)).then(this._resizeImage.bind(this)).then(this._drawImage.bind(this)).then(this._compress.bind(this)).then(function(r){return{source:n({blob:e},t),result:n({},r)}})}}]),m}();return m});
+!function(e,t){"function"==typeof define&&define.amd?define(["exif-js"],t):"object"==typeof exports?module.exports=t(require("exif-js")):e.CanvasCompress=t(e.EXIF)}(this,function(e){"use strict";function t(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e){return l.includes(e)?e:(console.warn("[canvas-compress]: unsupport MIME type "+e+", will fallback to default "+f),f)}function n(e,t){var r=e.width,i=e.height;switch(t){case 1:return{width:r,height:i,matrix:[1,0,0,1,0,0]};case 2:return{width:r,height:i,matrix:[-1,0,0,1,r,0]};case 3:return{width:r,height:i,matrix:[-1,0,0,-1,r,i]};case 4:return{width:r,height:i,matrix:[1,0,0,-1,0,i]};case 5:return{width:i,height:r,matrix:[0,1,1,0,0,0]};case 6:return{width:i,height:r,matrix:[0,1,-1,0,i,0]};case 7:return{width:i,height:r,matrix:[0,-1,-1,0,i,r]};case 8:return{width:i,height:r,matrix:[0,-1,1,0,0,r]}}}var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},a=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),u=window.URL||window.webkitURL,h=Math.log(2),s=4,c={PNG:"image/png",JPEG:"image/jpeg",WEBP:"image/webp"},l=Object.keys(c).map(function(e){return c[e]}),f=c.JPEG,g=.9,d={width:1e3,height:618},m={_Promise:window.Promise,get Promise(){if("function"!=typeof this._Promise)throw new Error("canvas-compress requires Promise");return this._Promise},set Promise(e){if("function"!=typeof e)throw new TypeError("Promise should be a function");this._Promise=e}},p=function v(){var e=this;r(this,v),this.promise=new m.Promise(function(t,r){e.resolve=t,e.reject=r})},w=function(){function w(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.type,n=void 0===t?f:t,o=e.width,a=void 0===o?d.width:o,u=e.height,h=void 0===u?d.height:u,s=e.quality,l=void 0===s?g:s;r(this,w),n=i(n),l=parseFloat(l);var m={width:parseFloat(a),height:parseFloat(h)};Object.defineProperties(this,{isJPEG:{value:n===c.JPEG},outputType:{get:function(){return n}},outputSize:{get:function(){return m}},outputQuality:{get:function(){return l}}})}return a(w,null,[{key:"usePromise",value:function(e){m.Promise=e}},{key:"isSupportedType",value:function(e){return l.includes(e)}}]),a(w,[{key:"_clear",value:function(e,t,r){1===e.nodeType&&(e=e.getContext("2d"),t=e.width,r=e.height),this.isJPEG?(e.fillStyle="#fff",e.fillRect(0,0,t,r)):e.clearRect(0,0,t,r)}},{key:"_getOriginalImage",value:function(e){var t=u.createObjectURL(e),r=new Image,i=new p;return r.onload=function(){i.resolve(r)},r.onerror=function(){i.reject("image load error")},r.src=t,i.promise}},{key:"_drawOriginalImage",value:function(r){var i=this,o=document.createElement("canvas"),a=o.getContext("2d"),h=new p;return e.getData(r,function(){var s=e.getTag(r,"Orientation")||1,c=n(r,s),l=c.width,f=c.height,g=c.matrix;o.width=l,o.height=f,a.save(),a.transform.apply(a,t(g)),i._clear(a,l,f),a.drawImage(r,0,0),a.restore(),u.revokeObjectURL(r.src),h.resolve(o)}),h.promise}},{key:"_resizeImage",value:function(e){var t=this.outputSize,r=e.width,i=e.height,n=Math.min(1,t.width/r,t.height/i);return m.Promise.resolve({source:e,scale:n})}},{key:"_drawImage",value:function(e){var t=e.source,r=e.scale;if(1===r)return m.Promise.resolve(t);var i=t.getContext("2d"),n=Math.min(s,Math.ceil(1/r/h)),o=Math.pow(r,1/n),a=document.createElement("canvas"),u=a.getContext("2d"),c=t.width,l=t.height;a.width=c,a.height=l;for(var f=0;f<n;){var g=c*o|0,d=l*o|0,p=void 0,w=void 0;if(f%2===0?(p=t,w=u):(p=a,w=i),this._clear(w,c,l),w.drawImage(p,0,0,c,l,0,0,g,d),f++,c=g,l=d,f===n){var v=p===t?a:t,y=w.getImageData(0,0,c,l);return v.width=c,v.height=l,w.putImageData(y,0,0),m.Promise.resolve(v)}}}},{key:"_compress",value:function(e){var t=this.outputType,r=this.outputQuality,i=e.width,n=e.height,o=e.toDataURL(t,r),a=atob(o.split(",")[1]).split("").map(function(e){return e.charCodeAt(0)}),u=new Blob([new Uint8Array(a)],{type:t});return m.Promise.resolve({blob:u,width:i,height:n})}},{key:"process",value:function(e){if(!e)return m.Promise.reject(new ReferenceError("file blob is required"));if(!e.type.match(/^image/))return m.Promise.reject(new TypeError("unsupport file type: "+e.type));var t={};return this._getOriginalImage(e).then(function(e){return t.width=e.width,t.height=e.height,e}).then(this._drawOriginalImage.bind(this)).then(this._resizeImage.bind(this)).then(this._drawImage.bind(this)).then(this._compress.bind(this)).then(function(r){return{source:o({blob:e},t),result:o({},r)}})}}]),w}();return w.MIME=o({},c,{JPG:c.JPEG}),w});

package.json

 {
   "name": "canvas-compress",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "image compress with canvas",
@@ -5,0 +5,0 @@ "main": "dist/canvas-compress.js",

README.md

@@ -42,3 +42,3 @@ # CanvasCompress
     const compressor = new CanvasCompress({
-        type: 'image/jpeg',
+        type: CanvasCompress.MIME.JPEG,
         width: 1000,
@@ -60,9 +60,9 @@ height: 618,
 
-- `type<string>`: output type, default is `image/jpeg`
+- `type: string`: output type, default is `image/jpeg`
 
-- `width<number>`: output width, default is `1000`
+- `width: number`: output width, default is `1000`
 
-- `height<number>`: ouput height, default is `618`
+- `height: number`: ouput height, default is `618`
 
-- `quality<number>`: output quality, defalut is `0.9`
+- `quality: number`: output quality, defalut is `0.9`
 
@@ -75,4 +75,18 @@ ## Use third-party Promise
 
+## Supported output MIME types
+
+canvas-compress uses [`canvas.toDataUrl()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) method to convert canvas to binary. So the supported MIME types is:
+
+- 'image/png'
+- 'image/jpeg'
+- 'image/webp'
+
+You can get MIME type via `CanvasCompress.MIME`, or use `CanvasCompress.isSupportedType(MIMEtype: string)` to check if it's a valid MIME type.
+
+## About alpha channel
+
+Alpha channel is not available with MIME type `image/jpeg`, so when you are trying to turn an image into jpeg, you'll get a full white background(`rgb(255, 255, 255)`) instead of transparent black(`rgba(0, 0, 0, 0)`).
+
 ## License
 
 MIT.

src/canvas-compress.js

@@ -6,4 +6,12 @@ const URL = window.URL || window.webkitURL;
 
+const MIME_TYPES = {
+    PNG: 'image/png',
+    JPEG: 'image/jpeg',
+    WEBP: 'image/webp',
+};
+
+const SUPPORT_MIME_TYPES = Object.keys(MIME_TYPES).map(type => MIME_TYPES[type]);
+
+const DEFAULT_TYPE = MIME_TYPES.JPEG;
 const DEFAULT_QUALITY = 0.9;
-const DEFAULT_TYPE = 'image/jpeg';
 const DEFAULT_SIZE = {
@@ -34,2 +42,12 @@ width: 1000,
 
+function adjustMIME(type) {
+    if (!SUPPORT_MIME_TYPES.includes(type)) {
+        console.warn(`[canvas-compress]: unsupport MIME type ${type}, will fallback to default ${DEFAULT_TYPE}`);
+
+        return DEFAULT_TYPE;
+    }
+
+    return type;
+}
+
 function getTransform(image, orientation) {
@@ -129,4 +147,13 @@ const { width, height } = image;
         GLOBAL_ENV.Promise = Constructor;
-    }
+    };
 
+    static isSupportedType(type) {
+        return SUPPORT_MIME_TYPES.includes(type);
+    };
+
+    static MIME = {
+        ...MIME_TYPES,
+        JPG: MIME_TYPES.JPEG,
+    };
+
     constructor({
@@ -138,2 +165,3 @@ type = DEFAULT_TYPE,
     } = {}) {
+        type = adjustMIME(type);
 
@@ -148,2 +176,5 @@ quality = parseFloat(quality);
         Object.defineProperties(this, {
+            isJPEG: {
+                value: type === MIME_TYPES.JPEG,
+            },
             outputType: {
@@ -167,2 +198,18 @@ get() {
 
+    _clear(ctx, width, height) {
+        // is canvas?
+        if (ctx.nodeType === 1) {
+            ctx = ctx.getContext('2d');
+            width = ctx.width;
+            height = ctx.height;
+        }
+
+        if (this.isJPEG) {
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, width, height);
+        } else {
+            ctx.clearRect(0, 0, width, height);
+        }
+    }
+
     // resolved with image element
@@ -202,2 +249,3 @@ _getOriginalImage(file) {
             context.transform(...matrix);
+            this._clear(context, width, height);
             context.drawImage(image, 0, 0);
@@ -242,3 +290,5 @@ context.restore();
 
-        for (let i = 0; ; i++) {
+        let i = 0;
+
+        while (i < steps) {
             const dw = width * factor | 0;
@@ -257,5 +307,6 @@ const dh = height * factor | 0;
 
-            context.clearRect(0, 0, width, height);
+            this._clear(context, width, height);
             context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh);
 
+            i++;
             width = dw;
@@ -262,0 +313,0 @@ height = dh;

test/main.js

@@ -30,3 +30,3 @@ var URL = window.URL || window.webkitURL;
     var compressor = new CanvasCompress(Object.assign({
-        type: file.type,
+        type: CanvasCompress.MIME.JPG,
     }, options));
@@ -52,3 +52,3 @@ var startTime = Date.now();
             'Dimensions: ' + result.width + ' * ' + result.height,
-            'Compress Rate: ' + ((1 - result.blob.size / source.blob.size) * 100).toFixed(2) + '%',
+            'Compress rate: ' + ((result.blob.size / source.blob.size) * 100).toFixed(2) + '%',
             'Compress duration: ' + (Date.now() - startTime)+ 'ms'
@@ -55,0 +55,0 @@ ].join('\n');

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

25607

increased by10.44%

Lines of code

429

increased by10.57%

Number of lines in readme file

90

increased by18.42%

No dependency changes