| 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ImageCompressor=e():t.ImageCompressor=e()}(window,(function(){return function(t){var e={};function s(i){if(e[i])return e[i].exports;var a=e[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,s),a.l=!0,a.exports}return s.m=t,s.c=e,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)s.d(i,a,function(e){return t[e]}.bind(null,a));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)}([function(t,e,s){"use strict";s.r(e),s.d(e,"ImageCompressor",(function(){return a}));const i={toWidth:null,toHeight:null,mimeType:"image/png",speed:"low",mode:"strict",grayScale:!1,sepia:!1,threshold:!1,vReverse:!1,hReverse:!1,quality:1};class a{constructor(){this.settings=JSON.parse(JSON.stringify(i)),this.canvas=document.createElement("canvas"),this.image=document.createElement("img"),this.context=this.canvas.getContext("2d"),this.listenEvents()}listenEvents(){this.image.addEventListener("load",this.imageLoaded.bind(this),!1),this.image.addEventListener("error",this.imageFault,!1)}imageLoaded(){this.checkSizes(),this.compress()}imageFault(){throw new Error("Source can not be loaded")}run(t,e,s){this.settings=JSON.parse(JSON.stringify(i)),this.settings.toWidth=e.toWidth,this.settings.toHeight=e.toHeight,this.settings.mimeType=e.mimeType||this.settings.mimeType,this.settings.mode="strict"===e.mode||"stretch"===e.mode?e.mode:this.settings.mode,this.settings.speed=e.speed||this.settings.speed,this.settings.grayScale=e.hasOwnProperty("grayScale")?e.grayScale:this.settings.grayScale,this.settings.sepia=e.hasOwnProperty("sepia")?e.sepia:this.settings.sepia,this.settings.threshold=e.hasOwnProperty("threshold")?e.threshold:this.settings.threshold,this.settings.hReverse=e.hasOwnProperty("hReverse")?e.hReverse:this.settings.hReverse,this.settings.vReverse=e.hasOwnProperty("vReverse")?e.vReverse:this.settings.vReverse,this.imageReceiver=s,this.image.src=t}compress(){"high"!==this.settings.speed&&this.compressWithQuality(),this.compressAddOn()}compressAddOn(){this.naturalAR=this.image.naturalWidth/this.image.naturalHeight,this.compressedAR=this.settings.toWidth/this.settings.toHeight,this.canvas.width=this.settings.toWidth,this.canvas.height=this.settings.toHeight,this.context.fillStyle="image/png"===this.settings.mimeType?"rgba(255, 255, 255, 0)":"#FFFFFF",this.context.fillRect(0,0,this.settings.toWidth,this.settings.toHeight),"strict"===this.settings.mode&&this.strictResize(),"stretch"===this.settings.mode&&this.stretchResize(),this.imageFilters(),this.imageReverse(),this.imageReceiver(this.canvas.toDataURL(this.settings.mimeType,this.settings.quality)),this.compressedCanv=null}compressWithQuality(){this.image.naturalWidth<=this.settings.toWidth&&this.image.naturalHeight<=this.settings.toHeight?this.compressAddOn():this.firstCompress()}firstCompress(){const t=document.createElement("canvas"),e=t.getContext("2d");let s=this.image.naturalWidth/2,i=this.image.naturalHeight/2,a=this.settings.toWidth,h=this.settings.toHeight;if(!(s<a||i<h)){for(t.width=s,t.height=i,e.drawImage(this.image,0,0,s,i),s/=2,i/=2;s>a&&i>h;)e.drawImage(t,0,0,2*s,2*i,0,0,s,i),s/=2,i/=2;this.compressedCanv=t,this.compressedW=2*s,this.compressedH=2*i}}strictResize(){this.naturalAR>=this.compressedAR?this.fitWidth():this.fitHeight()}stretchResize(){this.compressedCanv?this.context.drawImage(this.compressedCanv,0,0,this.compressedW,this.compressedH,0,0,this.settings.toWidth,this.settings.toHeight):this.context.drawImage(this.image,0,0,this.settings.toWidth,this.settings.toHeight)}fitWidth(){const t=this.settings.toWidth/this.naturalAR,e=(this.settings.toHeight-t)/2;this.compressedCanv?this.context.drawImage(this.compressedCanv,0,0,this.compressedW,this.compressedH,0,e,this.settings.toWidth,t):this.context.drawImage(this.image,0,e,this.settings.toWidth,t)}fitHeight(){const t=this.settings.toHeight*this.naturalAR,e=(this.settings.toWidth-t)/2;this.compressedCanv?this.context.drawImage(this.compressedCanv,0,0,this.compressedW,this.compressedH,e,0,t,this.settings.toHeight):this.context.drawImage(this.image,e,0,t,this.settings.toHeight)}checkSizes(){const t=this.image.naturalWidth/this.image.naturalHeight;if(!this.settings.toWidth&&!this.settings.toHeight)return this.settings.toWidth=this.image.naturalWidth,void(this.settings.toHeight=this.image.naturalHeight);this.settings.toWidth?this.settings.toHeight||(this.settings.toHeight=this.settings.toWidth/t):this.settings.toWidth=this.settings.toHeight*t}grayScale(){const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);let e;for(let s=0,i=t.data.length;s<i;s+=4)0!==t.data[s+3]&&(e=(t.data[s]+t.data[s+1]+t.data[s+2])/3,t.data[s]=e,t.data[s+1]=e,t.data[s+2]=e);this.context.putImageData(t,0,0)}sepia(){const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);for(let e=0,s=t.data.length;e<s;e+=4)0!==t.data[e+3]&&(t.data[e]=.393*t.data[e]+.769*t.data[e+1]+.189*t.data[e+2],t.data[e+1]=.349*t.data[e]+.686*t.data[e+1]+.168*t.data[e+2],t.data[e+2]=.272*t.data[e]+.534*t.data[e+1]+.131*t.data[e+2]);this.context.putImageData(t,0,0)}threshold(){const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);let e,s;for(let i=0,a=t.data.length;i<a;i+=4)0!==t.data[i+3]&&(e=(t.data[i]+t.data[i+1]+t.data[i+2])/3,s=e>this.settings.threshold?255:0,t.data[i]=s,t.data[i+1]=s,t.data[i+2]=s);this.context.putImageData(t,0,0)}imageFilters(){this.settings.grayScale?this.grayScale():this.settings.sepia?this.sepia():this.settings.threshold&&this.threshold()}imageReverse(){this.settings.vReverse&&this.vReverse(),this.settings.hReverse&&this.hReverse()}vReverse(){const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height).data,e=this.context.createImageData(this.canvas.width,this.canvas.height),s=this.canvas.height;let i=0,a=0;const h=4*this.canvas.width;for(var n=s-1;n>=0;n--){i=n*h;for(var r=0;r<h;r+=4)e.data[a]=t[i+r],e.data[a+1]=t[i+r+1],e.data[a+2]=t[i+r+2],e.data[a+3]=t[i+r+3],a+=4}this.context.putImageData(e,0,0,0,0,this.canvas.width,this.canvas.height)}hReverse(){const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height).data,e=this.context.createImageData(this.canvas.width,this.canvas.height),s=this.canvas.height;let i=0,a=0,h=0,n=4*this.canvas.width;for(let r=n-4;r>0;r-=4)for(let o=0;o<s;o++)a=o*n,i=a+r,h=a+n-r,e.data[h]=t[i],e.data[h+1]=t[i+1],e.data[h+2]=t[i+2],e.data[h+3]=t[i+3];this.context.putImageData(e,0,0,0,0,this.canvas.width,this.canvas.height)}}window.ImageCompressor=a}])})); |