canvas-color - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

build/index.js

@@ -1,1 +0,1 @@
-!function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/build",e(e.s=0)}([function(t,e,i){"use strict";var n=i(1),a=function(t){var e=new RegExp("[\\?&]"+t+"=([^&#]*)").exec(location.href);return e?e[1]:null}("image"),r=["9607546","9950313","9441414","1011681","9766938","9263023","11460601"],s="",o=function(t){s+='\n    <li style="background: rgba('+t.red+", "+t.green+", "+t.blue+', 1)">\n      <img src="'+t.imgData+'">\n      <span>\n        rgba('+t.red+", "+t.green+", "+t.blue+", 1)\n      </span>\n    </li>\n  ",document.querySelector("#list").innerHTML=s};r.forEach(function(t){new n.CanvasColor({image:"//avatars1.githubusercontent.com/u/"+t+"?v=4&s=400",size:40,radius:1.2,filter:function(t,e,i){return Math.max(Math.max(t,e),i)-Math.min(Math.min(t,e),i)<10},onSuccess:function(t){o(t)}})});var u=new Image;u.crossOrigin="*",u.src=a||"//avatars1.githubusercontent.com/u/9607546?v=4&s=400",u.onload=function(){new n.CanvasColor({image:this,size:40,radius:1.2,filter:function(t,e,i){return Math.max(Math.max(t,e),i)-Math.min(Math.min(t,e),i)<10},onSuccess:function(t){o(t)}})}},function(t,e,i){"use strict";var n,a,r;!function(i,s){a=[e],n=s,void 0!==(r="function"==typeof n?n.apply(e,a):n)&&(t.exports=r)}(0,function(t,e){function i(t){this.image=t.image,this.size=t.size||50,this.radius=t.radius||1,this.filter=t.filter,this.onSuccess=t.onSuccess||function(){},this.init()}var n=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})},a=function(t,e,i){var n=document.createElement("canvas");return n.height=i,n.width=e,n.getContext("2d").drawImage(t,0,0),n.toDataURL()};i.prototype.init=function(){var t=this,e=document.createElement("canvas");e.id=n(),e.width=this.size,e.height=this.size;var i=e.getContext("2d");if("string"==typeof this.image){var r=new Image;r.crossOrigin="*",r.src=this.image,r.onload=function(){i.drawImage(this,0,0,t.size,t.size);var e=i.getImageData(0,0,t.size,t.size).data,n=t.getRGB(e,t.size,t.size);n.imgData=a(r,this.width,this.height),t.onSuccess(n)}}else{i.drawImage(this.image,0,0,t.size,t.size);var s=i.getImageData(0,0,t.size,t.size).data,o=t.getRGB(s,t.size,t.size);o.imgData=a(this.image,this.image.width,this.image.height),t.onSuccess(o)}},i.prototype.getRGB=function(t,e,i){for(var n=e*i,a=0,r=0,s=0,o=Object.keys(t),u=o.length,c=0;c<u/4;c++){var h=t[4*c],g=t[4*c+1],x=t[4*c+2];this.filter&&this.filter(h,g,x)||(a+=h,r+=g,s+=x)}a/=n,r/=n,s/=n;var f=0,m=0;a>180&&(f++,m+=a-180),r>180&&(f++,m+=r-180),s>180&&(f++,m+=s-180);var l=Math.max(a,r,s);if((l-a>10||l-r>10||l-s>10)&&(l===a?a*=this.radius:l===r?r*=this.radius:s*=this.radius),f>=2){var d=.5*m/225;d<=.5&&(d=.5),a*=d,r*=d,s*=d}return{red:Math.min(a>>0,255),green:Math.min(r>>0,255),blue:Math.min(s>>0,255)}},t.CanvasColor=i})}]);
+!function(t){function e(a){if(n[a])return n[a].exports;var i=n[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,a){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/build",e(e.s=0)}([function(t,e,n){"use strict";var a=n(1),i=function(t){var e=new RegExp("[\\?&]"+t+"=([^&#]*)").exec(location.href);return e?e[1]:null}("image"),r=["9607546","9950313","9441414","1011681","9766938","9263023","11460601"],s="",o=function(t){s+='\n    <li style="background: rgba('+t.red+", "+t.green+", "+t.blue+', 1)">\n      <img src="'+t.imgData+'">\n      <span>\n        rgba('+t.red+", "+t.green+", "+t.blue+", 1)\n      </span>\n    </li>\n  ",document.querySelector("#list").innerHTML=s};r.forEach(function(t){new a.CanvasColor({image:"//avatars1.githubusercontent.com/u/"+t+"?v=4&s=400",size:40,radius:1.2,filter:function(t,e,n){return Math.max(Math.max(t,e),n)-Math.min(Math.min(t,e),n)<10},onSuccess:function(t){o(t)}})});var c=new Image;c.crossOrigin="*",c.src=i||"//avatars1.githubusercontent.com/u/9607546?v=4&s=400",c.onload=function(){new a.CanvasColor({image:this,size:40,radius:1.2,filter:function(t,e,n){return Math.max(Math.max(t,e),n)-Math.min(Math.min(t,e),n)<10},onSuccess:function(t){o(t)}})}},function(t,e,n){"use strict";var a,i,r;!function(n,s){i=[e],a=s,void 0!==(r="function"==typeof a?a.apply(e,i):a)&&(t.exports=r)}(0,function(t,e){function n(t){this.image=t.image,this.size=t.size||50,this.radius=t.radius||1,this.filter=t.filter,this.onSuccess=t.onSuccess||function(){},this.init()}var a=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})},i=function(t,e,n){var a=document.createElement("canvas");return a.height=n,a.width=e,a.getContext("2d").drawImage(t,0,0),a.toDataURL()};n.prototype.init=function(){var t=this,e=document.createElement("canvas");e.id=a(),e.width=this.size,e.height=this.size;var n=e.getContext("2d");if("string"==typeof this.image){var r=new Image;r.crossOrigin="*",r.src=this.image,r.onload=function(){n.drawImage(this,0,0,t.size,t.size);var e=n.getImageData(0,0,t.size,t.size).data,a=t.getRGB(e,t.size,t.size);a.imgData=i(r,this.width,this.height),t.onSuccess(a)}}else{n.drawImage(this.image,0,0,t.size,t.size);var s=n.getImageData(0,0,t.size,t.size).data,o=t.getRGB(s,t.size,t.size);o.imgData=i(this.image,this.image.width,this.image.height),t.onSuccess(o)}},n.prototype.RGBtoHSV=function(t){var e=t[0],n=t[1],a=t[2];e/=255,n/=255,a/=255;var i,r,s=Math.max(e,n,a),o=Math.min(e,n,a),c=s,u=s-o;if(r=0==s?0:u/s,s==o)i=0;else{switch(s){case e:i=(n-a)/u+(n<a?6:0);break;case n:i=(a-e)/u+2;break;case a:i=(e-n)/u+4}i/=6}return[i,r,c]},n.prototype.HSVtoRGB=function(t){var e,n,a,i=t[0],r=t[1],s=t[2],o=Math.floor(6*i),c=6*i-o,u=s*(1-r),h=s*(1-c*r),g=s*(1-(1-c)*r);switch(o%6){case 0:e=s,n=g,a=u;break;case 1:e=h,n=s,a=u;break;case 2:e=u,n=s,a=g;break;case 3:e=u,n=h,a=s;break;case 4:e=g,n=u,a=s;break;case 5:e=s,n=u,a=h}return[Math.round(255*e),Math.round(255*n),Math.round(255*a)]},n.prototype.getRGB=function(t,e,n){for(var a=e*n,i=0,r=0,s=0,o=Object.keys(t),c=o.length,u=0;u<c/4;u++){var h=t[4*u],g=t[4*u+1],f=t[4*u+2];this.filter&&this.filter(h,g,f)||(i+=h,r+=g,s+=f)}i/=a,r/=a,s/=a,i=i>255?255:i,r=r>255?255:r,s=s>255?255:s;var x=this.RGBtoHSV([i,r,s]);x[1]=.5,x[2]=.5;var m=this.HSVtoRGB(x);return{red:Math.round(m[0]),green:Math.round(m[1]),blue:Math.round(m[2])}},t.CanvasColor=n})}]);

canvas-color.js

@@ -67,2 +67,55 @@ ;(function(root, factory) {
 
+  CanvasColor.prototype.RGBtoHSV = function (rgb) {
+    var r = rgb[0],
+      g = rgb[1],
+      b = rgb[2];
+
+    r = r/255, g = g/255, b = b/255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h, s, v = max;
+
+    var d = max - min;
+    s = max == 0 ? 0 : d / max;
+
+    if(max == min){
+      h = 0; // achromatic
+    }else{
+      switch(max){
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case g: h = (b - r) / d + 2; break;
+        case b: h = (r - g) / d + 4; break;
+      }
+      h /= 6;
+    }
+
+    return [h, s, v];
+  };
+
+
+  CanvasColor.prototype.HSVtoRGB = function (hsv) {
+    // in JS 1.7 use: var [h, s, l] = hsl;
+    var h = hsv[0],
+      s = hsv[1],
+      v = hsv[2],
+
+      r, g, b;
+
+    var i = Math.floor(h * 6);
+    var f = h * 6 - i;
+    var p = v * (1 - s);
+    var q = v * (1 - f * s);
+    var t = v * (1 - (1 - f) * s);
+
+    switch(i % 6){
+      case 0: r = v, g = t, b = p; break;
+      case 1: r = q, g = v, b = p; break;
+      case 2: r = p, g = v, b = t; break;
+      case 3: r = p, g = q, b = v; break;
+      case 4: r = t, g = p, b = v; break;
+      case 5: r = v, g = p, b = q; break;
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+  };
+
   CanvasColor.prototype.getRGB = function(data, width, height) {
@@ -95,49 +148,17 @@ var count = width * height;
 
-    var lightValue = 180;
-    var lightCount = 0;
-    var light = 0;
+    red = red > 255 ? 255 : red;
+    green = green > 255 ? 255 : green;
+    blue = blue > 255 ? 255 : blue;
 
-    if (red > lightValue) {
-      lightCount++;
-      light += red - lightValue;
-    }
+    var hsv = this.RGBtoHSV([red, green, blue])
 
-    if (green > lightValue) {
-      lightCount++;
-      light += green - lightValue;
-    }
+    hsv[1] = 0.5;
+    hsv[2] = 0.5;
 
-    if (blue > lightValue) {
-      lightCount++;
-      light += blue - lightValue;
-    }
+    var rgb = this.HSVtoRGB(hsv);
 
-    var mColor = Math.max(red, green, blue);
-
-    if (mColor - red > 10 || mColor - green > 10 || mColor - blue > 10) {
-      if (mColor === red) {
-        red *= this.radius;
-      } else if (mColor === green) {
-        green *= this.radius;
-      } else {
-        blue *= this.radius;
-      }
-    }
-
-    if (lightCount >= 2) {
-      var factor = 0.5 * light / (3 * (255 - lightValue));
-
-      if (factor <= 0.5) {
-        factor = 0.5;
-      }
-
-      red *= factor;
-      green *= factor;
-      blue *= factor;
-    }
-
     return {
-      red: Math.min(red >> 0, 255),
-      green: Math.min(green >> 0, 255),
-      blue: Math.min(blue >> 0, 255)
+      red: Math.round(rgb[0]),
+      green: Math.round(rgb[1]),
+      blue: Math.round(rgb[2])
     };
@@ -148,1 +169,2 @@ };
 });
+

dist/canvas-color.js

@@ -69,2 +69,67 @@ 'use strict';
 
+  CanvasColor.prototype.RGBtoHSV = function (rgb) {
+    var r = rgb[0],
+        g = rgb[1],
+        b = rgb[2];
+
+    r = r / 255, g = g / 255, b = b / 255;
+    var max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+    var h,
+        s,
+        v = max;
+
+    var d = max - min;
+    s = max == 0 ? 0 : d / max;
+
+    if (max == min) {
+      h = 0; // achromatic
+    } else {
+        switch (max) {
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);break;
+          case g:
+            h = (b - r) / d + 2;break;
+          case b:
+            h = (r - g) / d + 4;break;
+        }
+        h /= 6;
+      }
+
+    return [h, s, v];
+  };
+
+  CanvasColor.prototype.HSVtoRGB = function (hsv) {
+    // in JS 1.7 use: var [h, s, l] = hsl;
+    var h = hsv[0],
+        s = hsv[1],
+        v = hsv[2],
+        r,
+        g,
+        b;
+
+    var i = Math.floor(h * 6);
+    var f = h * 6 - i;
+    var p = v * (1 - s);
+    var q = v * (1 - f * s);
+    var t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+      case 0:
+        r = v, g = t, b = p;break;
+      case 1:
+        r = q, g = v, b = p;break;
+      case 2:
+        r = p, g = v, b = t;break;
+      case 3:
+        r = p, g = q, b = v;break;
+      case 4:
+        r = t, g = p, b = v;break;
+      case 5:
+        r = v, g = p, b = q;break;
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+  };
+
   CanvasColor.prototype.getRGB = function (data, width, height) {
@@ -97,49 +162,17 @@ var count = width * height;
 
-    var lightValue = 180;
-    var lightCount = 0;
-    var light = 0;
+    red = red > 255 ? 255 : red;
+    green = green > 255 ? 255 : green;
+    blue = blue > 255 ? 255 : blue;
 
-    if (red > lightValue) {
-      lightCount++;
-      light += red - lightValue;
-    }
+    var hsv = this.RGBtoHSV([red, green, blue]);
 
-    if (green > lightValue) {
-      lightCount++;
-      light += green - lightValue;
-    }
+    hsv[1] = 0.5;
+    hsv[2] = 0.5;
 
-    if (blue > lightValue) {
-      lightCount++;
-      light += blue - lightValue;
-    }
+    var rgb = this.HSVtoRGB(hsv);
 
-    var mColor = Math.max(red, green, blue);
-
-    if (mColor - red > 10 || mColor - green > 10 || mColor - blue > 10) {
-      if (mColor === red) {
-        red *= this.radius;
-      } else if (mColor === green) {
-        green *= this.radius;
-      } else {
-        blue *= this.radius;
-      }
-    }
-
-    if (lightCount >= 2) {
-      var factor = 0.5 * light / (3 * (255 - lightValue));
-
-      if (factor <= 0.5) {
-        factor = 0.5;
-      }
-
-      red *= factor;
-      green *= factor;
-      blue *= factor;
-    }
-
     return {
-      red: Math.min(red >> 0, 255),
-      green: Math.min(green >> 0, 255),
-      blue: Math.min(blue >> 0, 255)
+      red: Math.round(rgb[0]),
+      green: Math.round(rgb[1]),
+      blue: Math.round(rgb[2])
     };
@@ -146,0 +179,0 @@ };

package.json

 {
   "name": "canvas-color",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "color",
@@ -5,0 +5,0 @@ "keywords": [

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

16353

increased by12.48%

Lines of code

386

increased by12.87%

No dependency changes