canvas-compress - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

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,i=t.getContext("2d"),n=Math.min(u,Math.ceil(1/r/h));r=Math.pow(r,1/n);for(var o=t.width,a=t.height;n--;){var s=o*r|0,c=a*r|0;i.drawImage(t,0,0,o,a,0,0,s,c),o=s,a=c}var f=document.createElement("canvas"),l=f.getContext("2d");return f.width=o,f.height=a,l.drawImage(t,0,0,o,a,0,0,o,a),g.Promise.resolve(f)}},{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,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}},d=function m(){var e=this;r(this,m),this.promise=new g.Promise(function(t,r){e.resolve=t,e.reject=r})},l=function(){function l(){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,l),g=parseFloat(g);var d={width:parseFloat(o),height:parseFloat(h)};Object.defineProperties(this,{outputType:{get:function(){return i}},outputSize:{get:function(){return d}},outputQuality:{get:function(){return g}}})}return o(l,null,[{key:"usePromise",value:function(e){g.Promise=e}}]),o(l,[{key:"_getOriginalImage",value:function(e){var t=a.createObjectURL(e),r=new Image,i=new d;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 d;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,i=document.createElement("canvas"),n=i.getContext("2d"),o=t.getContext("2d"),a=Math.min(u,Math.ceil(1/r/h));r=Math.pow(r,1/a);var s=t.width,c=t.height;i.width=s,i.height=c;for(var f=0;f<a;f++){var d=s*r|0,l=c*r|0,m=void 0,w=void 0;f%2===0?(m=t,w=n):(m=i,w=o),w.clearRect(0,0,s,c),w.drawImage(m,0,0,s,c,0,0,d,l),s=d,c=l}var v=document.createElement("canvas"),p=v.getContext("2d");return v.width=s,v.height=c,p.drawImage(t,0,0,s,c,0,0,s,c),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)}})}}]),l}();return l});

package.json

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

README.md

@@ -41,6 +41,11 @@ # CanvasCompress
 
-    let compressor = new CanvasCompress(options);
+    const compressor = new CanvasCompress({
+        type: 'image/jpeg',
+        width: 1000,
+        height: 618,
+        quality: 0.9,
+    });
 
     compressor.process(fileBlob).then(({ source, result }) => {
-        const { blob, width, height } = source;
+        // const { blob, width, height } = source;
         const { blob, width, height } = result;
@@ -47,0 +52,0 @@ ...

src/canvas-compress.js

@@ -218,4 +218,7 @@ const URL = window.URL || window.webkitURL;
     _drawImage({ source, scale }) {
+        const tempCanvas = document.createElement('canvas');
+        const tctx = tempCanvas.getContext('2d');
+
         const sctx = source.getContext('2d');
-        let steps = Math.min(MAX_SCALE_STEPS, Math.ceil((1 / scale) / SCALE_FACTOR));
+        const steps = Math.min(MAX_SCALE_STEPS, Math.ceil((1 / scale) / SCALE_FACTOR));
 
@@ -226,8 +229,22 @@ scale = Math.pow(scale, 1 / steps);
 
-        while(steps--) {
-            let dw = width * scale | 0;
-            let dh = height * scale | 0;
+        tempCanvas.width = width;
+        tempCanvas.height = height;
 
-            sctx.drawImage(source, 0, 0, width, height, 0, 0, dw, dh);
+        for (let i = 0; i < steps; i++) {
+            const dw = width * scale | 0;
+            const dh = height * scale | 0;
 
+            let canvas, context;
+
+            if (i % 2 === 0) {
+                canvas = source;
+                context = tctx;
+            } else {
+                canvas = tempCanvas;
+                context = sctx;
+            }
+
+            context.clearRect(0, 0, width, height);
+            context.drawImage(canvas, 0, 0, width, height, 0, 0, dw, dh);
+
             width = dw;
@@ -234,0 +251,0 @@ height = dh;

test/main.js

@@ -29,3 +29,5 @@ var URL = window.URL || window.webkitURL;
 
-    var compressor = new CanvasCompress(options);
+    var compressor = new CanvasCompress(Object.assign({
+        type: file.type,
+    }, options));
     var startTime = Date.now();
@@ -71,2 +73,2 @@
     compress(this.files[0]);
-});
+});

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

22891

increased by3.61%

Lines of code

379

increased by4.41%

Number of lines in readme file

76

increased by7.04%

No dependency changes