UNPKG

fast-average-color

Version:

A simple library that calculates the average color of images, videos and canvas in browser environment.

2 lines 5.48 kB
/*! Fast Average Color | © 2019 Denis Seleznev | MIT License | https://github.com/hcodes/fast-average-color/ */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.FastAverageColor=e()}(this,function(){"use strict";function n(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function _(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=[],n=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{n||null==s.return||s.return()}finally{if(i)throw o}}return r}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}return function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}return function(t,e,r){e&&n(t.prototype,e),r&&n(t,r)}(t,[{key:"getColorAsync",value:function(t,e){if(t.complete){var r=this.getColor(t,e);return r.error?Promise.reject(r.error):Promise.resolve(r)}return this._bindImageEvents(t,e)}},{key:"getColor",value:function(t,e){e=e||{};var r=this._getDefaultColor(e),n=this._getOriginalSize(t),i=this._prepareSizeAndPosition(n,e),o=null,a=r;if(!(i.srcWidth&&i.srcHeight&&i.destWidth&&i.destHeight))return this._prepareResult(r,new Error("FastAverageColor: Incorrect sizes."));if(!this._ctx&&(this._canvas=this._makeCanvas(),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return this._prepareResult(r,new Error("FastAverageColor: Canvas Context 2D is not supported in this browser."));this._canvas.width=i.destWidth,this._canvas.height=i.destHeight;try{this._ctx.clearRect(0,0,i.destWidth,i.destHeight),this._ctx.drawImage(t,i.srcLeft,i.srcTop,i.srcWidth,i.srcHeight,0,0,i.destWidth,i.destHeight);var s=this._ctx.getImageData(0,0,i.destWidth,i.destHeight).data;a=this.getColorFromArray4(s,e)}catch(t){o=t}return this._prepareResult(a,o)}},{key:"getColorFromArray4",value:function(t,e){e=e||{};var r=t.length;if(r<4)return this._getDefaultColor(e);var n=r-r%4,i=4*(e.step||1),o="_"+(e.algorithm||"sqrt")+"Algorithm";if("function"!=typeof this[o])throw new Error("FastAverageColor: ".concat(e.algorithm," is unknown algorithm."));return this[o](t,n,i)}},{key:"destroy",value:function(){delete this._canvas,delete this._ctx}},{key:"_getDefaultColor",value:function(t){return this._getOption(t,"defaultColor",[255,255,255,255])}},{key:"_getOption",value:function(t,e,r){return void 0===t[e]?r:t[e]}},{key:"_prepareSizeAndPosition",value:function(t,e){var r=this._getOption(e,"left",0),n=this._getOption(e,"top",0),i=this._getOption(e,"width",t.width),o=this._getOption(e,"height",t.height),a=i,s=o;if("precision"===e.mode)return{srcLeft:r,srcTop:n,srcWidth:i,srcHeight:o,destWidth:a,destHeight:s};var u;return o<i?(u=i/o,a=100,s=Math.round(a/u)):(u=o/i,s=100,a=Math.round(s/u)),(i<a||o<s||a<10||s<10)&&(a=i,s=o),{srcLeft:r,srcTop:n,srcWidth:i,srcHeight:o,destWidth:a,destHeight:s}}},{key:"_simpleAlgorithm",value:function(t,e,r){for(var n=0,i=0,o=0,a=0,s=0,u=0;u<e;u+=r){var h=t[u+3];n+=t[u]*h,i+=t[u+1]*h,o+=t[u+2]*h,a+=h,s++}return a?[Math.round(n/a),Math.round(i/a),Math.round(o/a),Math.round(a/s)]:[0,0,0,0]}},{key:"_sqrtAlgorithm",value:function(t,e,r){for(var n=0,i=0,o=0,a=0,s=0,u=0;u<e;u+=r){var h=t[u],c=t[u+1],d=t[u+2],l=t[u+3];n+=h*h*l,i+=c*c*l,o+=d*d*l,a+=l,s++}return a?[Math.round(Math.sqrt(n/a)),Math.round(Math.sqrt(i/a)),Math.round(Math.sqrt(o/a)),Math.round(a/s)]:[0,0,0,0]}},{key:"_dominantAlgorithm",value:function(t,e,r){for(var n={},i=0;i<e;i+=r){var o=t[i],a=t[i+1],s=t[i+2],u=t[i+3],h=Math.round(o/24)+","+Math.round(a/24)+","+Math.round(s/24);n[h]?n[h]=[n[h][0]+o*u,n[h][1]+a*u,n[h][2]+s*u,n[h][3]+u,n[h][4]+1]:n[h]=[o*u,a*u,s*u,u,1]}var c=_(Object.keys(n).map(function(t){return n[t]}).sort(function(t,e){var r=t[4],n=e[4];return n<r?-1:r===n?0:1})[0],5),d=c[0],l=c[1],f=c[2],v=c[3],g=c[4];return v?[Math.round(d/v),Math.round(l/v),Math.round(f/v),Math.round(v/g)]:[0,0,0,0]}},{key:"_bindImageEvents",value:function(a,s){var u=this;return new Promise(function(e,r){function t(){o();var t=u.getColor(a,s);t.error?r(t.error):e(t)}function n(){o(),r(new Error("Image error"))}function i(){o(),r(new Error("Image abort"))}var o=function(){a.removeEventListener("load",t),a.removeEventListener("error",n),a.removeEventListener("abort",i)};a.addEventListener("load",t),a.addEventListener("error",n),a.addEventListener("abort",i)})}},{key:"_prepareResult",value:function(t,e){var r=t.slice(0,3),n=[].concat(r,t[3]/255),i=this._isDark(t);return{error:e,value:t,rgb:"rgb("+r.join(",")+")",rgba:"rgba("+n.join(",")+")",hex:this._arrayToHex(r),hexa:this._arrayToHex(t),isDark:i,isLight:!i}}},{key:"_getOriginalSize",value:function(t){return t instanceof HTMLImageElement?{width:t.naturalWidth,height:t.naturalHeight}:t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}},{key:"_toHex",value:function(t){var e=t.toString(16);return 1===e.length?"0"+e:e}},{key:"_arrayToHex",value:function(t){return"#"+t.map(this._toHex).join("")}},{key:"_isDark",value:function(t){return(299*t[0]+587*t[1]+114*t[2])/1e3<128}},{key:"_makeCanvas",value:function(){return"undefined"==typeof window?new OffscreenCanvas(1,1):document.createElement("canvas")}}]),t}()});