forked from licson/CanvasEffects
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CanvasEffects.min.js
17 lines (17 loc) · 8.17 KB
/
CanvasEffects.min.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function(q){var x=q.document,g=q.Math,m=function(a,c){for(var d in c)a[d]=c[d]},j=function(a,c){if(!a)throw Error(c||"");},l=function(a,c){j("canvas"===a.nodeName.toLowerCase(),"A canvas element is excepted.");var d={width:a.width,height:a.height,useWorker:"function"===typeof Worker,workerPath:"CanvasEffects.worker.js"};m(d,c);this.width=d.width;this.height=d.height;var b=x.createElement("canvas");b.width=this.width;b.height=this.height;this.ctx=a.getContext("2d");this.tmpCtx=b.getContext("2d");
if(d.useWorker){var e=this;this._queue=[];this.worker=new Worker(d.workerPath);this.worker.onmessage=function(a){var c=e.createImageData(e.width,e.height);if("undefined"===typeof Uint8ClampedArray)for(var b=0;b<a.data.length;b++)c.data[b]=a.data[b];else c.data.set(a.data);for(b=0;b<e._queue.length;b++)c.data=e._queue[b](c.data);e._queue=[];e.ctx.clearRect(0,0,e.width,e.height);e.ctx.putImageData(c,0,0)};this.worker.postMessage({type:"init",w:this.width,h:this.height})}};m(l.prototype,{load:function(a,
c){c="undefined"!==typeof c?c:!0;var d=new Image,b=this;d.onload=function(){c?(b.ctx.drawImage(this,0,0,this.width,this.height,0,0,b.width,b.height),b.tmpCtx.drawImage(this,0,0,this.width,this.height,0,0,b.width,b.height)):(b.ctx.drawImage(this,0,0,this.width,this.height),b.tmpCtx.drawImage(this,0,0,this.width,this.height))};d.crossOrigin=!0;d.src=a;return this},restore:function(){this.ctx.clearRect(0,0,this.width,this.height);this.ctx.drawImage(this.tmpCtx.canvas,0,0,this.width,this.height);return this},
save:function(){this.tmpCtx.clearRect(0,0,this.width,this.height);this.tmpCtx.drawImage(this.ctx.canvas,0,0,this.width,this.height);return this},toDataURL:function(){return this.ctx.canvas.toDataURL()},process:function(a){for(var c=this.ctx.getImageData(0,0,this.width,this.height),d=0;d<this.width;d++)for(var b=0;b<this.height;b++){var e=4*(b*this.width+d),f=a(c.data[e],c.data[e+1],c.data[e+2],c.data[e+3],d,b);c.data[e]=f[0];c.data[e+1]=f[1];c.data[e+2]=f[2];c.data[e+3]=f[3]}this.ctx.clearRect(0,
0,this.width,this.height);this.ctx.putImageData(c,0,0);return this},getContext:function(){return this.ctx},luminance:function(a,c,d){return 0.2126*a+0.7152*c+0.0722*d},createImageData:function(a,c){return this.tmpCtx.createImageData(a,c)},toHSL:function(a,c,d){a/=255;c/=255;d/=255;var b=g.max(a,c,d),e=g.min(a,c,d),f,h=(b+e)/2;if(b===e)f=e=0;else{var k=b-e,e=0.5<h?k/(2-b-e):k/(b+e);switch(b){case a:f=(c-d)/k+(c<d?6:0);break;case c:f=(d-a)/k+2;break;case d:f=(a-c)/k+4}}return{h:f/6,s:e,l:h}},toRGB:function(a,
c,d){if(0==c)d=c=a=d;else{var b=function(a,c,b){0>b&&(b+=1);1<b&&(b-=1);return b<1/6?a+6*(c-a)*b:0.5>b?c:b<2/3?a+6*(c-a)*(2/3-b):a},e=0.5>d?d*(1+c):d+c-d*c,f=2*d-e;d=b(f,e,a+1/3);c=b(f,e,a);a=b(f,e,a-1/3)}return{r:255*d,g:255*c,b:255*a}},colorTempToRGB:function(a){a/=100;var c,d;66>=a?(c=255,d=g.min(g.max(99.4708025861*g.log(a)-161.1195681661,0),255)):(c=g.min(g.max(329.698727446*g.pow(a-60,-0.1332047592),0),255),d=g.min(g.max(288.1221695283*g.pow(a-60,-0.0755148492),0),255));a=66<=a?255:19>=a?0:
g.min(g.max(138.5177312231*g.log(a-10)-305.0447927307,0),255);return{r:c,g:d,b:a}},equalizeHistogram:function(a,c){var d=a.length;c||(c=a);for(var b=new Float32Array(256),e=0,f=0;f<d;++f)++b[~~a[f]],++e;for(var g=b[0],f=1;256>f;++f)g=b[f]+=g;e=255/e;for(f=0;f<d;++f)c[f]=b[~~a[f]]*e;return c},_toWorker:function(a){if(this.worker)return m(a,{data:this.ctx.getImageData(0,0,this.width,this.height).data}),this.worker.postMessage(a),this;j(!1,"No web worker support!")},queue:function(a){if(this.worker)this._queue.push(a);
else{var c=this.ctx.getImageData(0,0,this.width,this.height);c.data=a(c.data);this.ctx.putImageData(c,0,0)}return this}});m(l.prototype,{greyscale:function(a){a=void 0===a?1:g.min(g.max(a,0),1);var c=this;return this.process(function(d,b,e,f){var g=c.luminance(d,b,e);return[g*a+d*(1-a),g*a+b*(1-a),g*a+e*(1-a),f]})},threshold:function(a){a=a||127;var c=this;return this.process(function(d,b,e,f){d=c.luminance(d,b,e)>a?255:0;return[d,d,d,f]})},invert:function(a){a=void 0===a?1:g.min(g.max(a,0),1);return this.process(function(c,
d,b,e){return[(255-c)*a+c*(1-a),(255-d)*a+d*(1-a),(255-b)*a+b*(1-a),e]})},sepia:function(a){a=void 0===a?1:g.min(g.max(a,0),1);return this.process(function(c,d,b,e){return[(0.393*c+0.769*d+0.189*b)*a+c*(1-a),(0.349*c+0.686*d+0.168*b)*a+d*(1-a),(0.272*c+0.534*d+0.131*b)*a+b*(1-a),e]})},hdr:function(){var a=function(a){0<a&&127>=a?a*=g.sin(g.PI*(90-a/4)/180):127<a&&(a*=g.sin(g.PI*(90-(255-a)/4)/180));return a};return this.process(function(c,d,b,e){return[a(c),a(d),a(b),e]})}});m(l.prototype,{noise:function(a,
c){j(0<=a,"Noise amount must be a positive number.");c=c||!1;return this.process(function(d,b,e,f){var h=-a/2+2*g.random()*a;return[d+h,b+h,e+h,c?f+h:f]})},glow:function(a){var c=this;this.blur(a);return this.queue(function(a){for(var b=c.ctx.getImageData(0,0,c.width,c.height),e=0;e<a.length;e+=4)a[e]=255-(255-a[e])*(255-b.data[e])/255,a[e+1]=255-(255-a[e+1])*(255-b.data[e+1])/255,a[e+2]=255-(255-a[e+2])*(255-b.data[e+2])/255,a[e+3]=255-(255-a[e+3])*(255-b.data[e+3])/255;return a})},colorMatrix:function(a){return this.process(function(c,
d,b,e){return[c*a[0]+d*a[1]+b*a[2]+e*a[3]+255*a[20],c*a[5]+d*a[6]+b*a[7]+e*a[8]+255*a[21],c*a[10]+d*a[11]+b*a[12]+e*a[13]+255*a[22],c*a[15]+d*a[16]+b*a[17]+e*a[18]+255*a[23]]})},equalize:function(){var a=this,c=new Uint8ClampedArray(this.width*this.height),d=0;this.process(function(b,e,f,g){c[d]=a.luminance(b,e,f);d++;return[b,e,f,g]});this.equalizeHistogram(c);d=0;return this.process(function(b,e,f,g){b=a.toHSL(b,e,f);b.l=c[d]/255;d++;b=a.toRGB(b.h,b.s,b.l);return[b.r,b.g,b.b,g]})},tv:function(){this.process(function(a,
c,d,b,e,f){e=80*g.sin(f);return[a-e,c-e,d-e,b]});return this.noise(50)}});m(l.prototype,{hue:function(a,c){j(void 0!==a,"Hue must be specified.");var d=this;c=c||!1;return this.process(function(b,e,f,g){b=d.toHSL(b,e,f);b.h=c?a/360:b.h+a/360;b=d.toRGB(b.h,b.s,b.l);return[b.r,b.g,b.b,g]})},saturation:function(a,c){j(void 0!==a,"Saturation must be specified.");var d=this;c=c||!1;return this.process(function(b,e,f,h){b=d.toHSL(b,e,f);b.s=c?g.min(g.max(a,0),1):g.min(g.max(b.s+a,0),1);b=d.toRGB(b.h,b.s,
b.l);return[b.r,b.g,b.b,h]})},brightness:function(a){j(void 0!==a,"Brightness must be set");return this.process(function(c,d,b,e){return[c+a,d+a,b+a,e]})},contrast:function(a){j(void 0!==a,"Contrast level must be set.");a=g.pow((a+100)/100,2);return this.process(function(c,d,b,e){return[255*((c/255-0.5)*a+0.5),255*((d/255-0.5)*a+0.5),255*((b/255-0.5)*a+0.5),e]})},gamma:function(a){j(void 0!==a,"Gamma level must be set.");return this.process(function(c,d,b,e){return[c*a,d*a,b*a,e]})},gammaRGB:function(a,
c,d){j(void 0!==a&&void 0!==c&&void 0!==d,"Gamma level must be set.");return this.process(function(b,e,f,g){return[b*a,e*c,f*d,g]})},vibrance:function(a){j(void 0!==a,"Vibrance level must be set.");a*=-1;return this.process(function(c,d,b,e){var f=g.max(c,d,b),h=2*g.abs(f-(c+d+b)/3)/255*a/100;c!==f&&(c+=(f-c)*h);d!==f&&(d+=(f-d)*h);b!==f&&(b+=(f-b)*h);return[c,d,b,e]})},whiteBalance:function(a){var c=this.colorTempToRGB(a);return this.process(function(a,b,e,f){return[a*(255/c.r),b*(255/c.g),e*(255/
c.b),f]})}});m(l.prototype,{convolute:function(a,c,d){j(void 0!==a,"Convolution matrix must be set.");j(void 0!==c,"Offset must be set.");d=d||!0;if(this.worker)this._toWorker({type:"convolute",matrix:a,offset:c,opaque:d});else{var b=this.ctx.getImageData(0,0,this.width,this.height),e=g.round(g.sqrt(a.length)),f=g.floor(e/2),h=b.data,k=b.width,b=b.height,m=this.createImageData(k,b),l=m.data;d=d?1:0;for(var r=0;r<b;r++)for(var s=0;s<k;s++){for(var q=r,x=s,t=4*(r*k+s),y=0,z=0,A=0,u=0,v=0;v<e;v++)for(var w=
0;w<e;w++){var n=q+v-f,p=x+w-f;0<=n&&(n<b&&0<=p&&p<k)&&(n=4*(n*k+p),p=a[v*e+w],y+=h[n]*p,z+=h[n+1]*p,A+=h[n+2]*p,u+=h[n+3]*p)}l[t]=c+y;l[t+1]=c+z;l[t+2]=c+A;l[t+3]=u+d*(255-u)}this.ctx.clearRect(0,0,this.width,this.height);this.ctx.putImageData(m,0,0)}return this},blur:function(a){j(void 0!==a,"Blur radius must be set.");a*=a;var c=1/a,d=[];if(4>a)return this;for(;a--;)d.push(c);return this.convolute(d,0,!1)},sharpen:function(){return this.convolute([0,-1,0,-1,5,-1,0,-1,0],0,!1)},emboss:function(){return this.convolute([2,
0,0,0,-1,0,0,0,-1],127,!1)},findEdges:function(){return this.convolute([-1,0,1,-2,0,2,-1,0,1],0,!1)}});q.CanvasEffects=l})(window);