Update gradient filter

kode-team · Jul 30, 2018 · 0f1db4c · 0f1db4c
1 parent b76dbd9
commit 0f1db4c
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 19 deletions.
diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js
@@ -1217,7 +1217,7 @@ var color = {
         return this.gray(this.RGBtoYCrCb(r, g, b).y);
     },
     brightness: function brightness(r, g, b) {
-        return r * 0.2126 + g * 0.7152 + b * 0.0722;
+        return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722);
     },
     RGBtoYCrCb: function RGBtoYCrCb(r, g, b) {
 
@@ -1231,7 +1231,7 @@ var color = {
         var Cb = 0.564 * (b - Y);
         var Cr = 0.713 * (r - Y);
 
-        return { y: Math.ceil(Y), cr: Cr, cb: Cb };
+        return { y: Y, cr: Cr, cb: Cb };
     },
     YCrCbtoRGB: function YCrCbtoRGB(y, cr, cb, bit) {
 
@@ -2242,6 +2242,9 @@ function makeFilter(filter) {
 
     var filterFunction = F[filterName];
 
+    if (!filterFunction) {
+        throw new Error(filterName + ' is not filter. please check filter name.');
+    }
     return filterFunction.apply(filterFunction, params);
 }
 
@@ -2302,6 +2305,7 @@ F.multi = function () {
     filters = filters.map(function (f) {
         return makeFilter(f);
     });
+
     return function (bitmap) {
         return filters.reduce(function (bitmap, f) {
             return f(bitmap);
@@ -2458,6 +2462,27 @@ F.bitonal = function (darkColor, lightColor) {
     });
 };
 
+F.duotone = function (gradientColor) {
+    var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 256;
+
+    var colors = color.gradient(gradientColor, scale).map(function (c) {
+        return color.parse(c);
+    });
+
+    return pack$1(function (pixels, i) {
+        var colorIndex = F.clamp(color.brightness(pixels[i], pixels[i + 1], pixels[i + 2]));
+        var newColorIndex = F.clamp(Math.floor(colorIndex * (scale / 256)));
+        var color$$1 = colors[newColorIndex];
+
+        pixels[i] = color$$1.r;
+        pixels[i + 1] = color$$1.g;
+        pixels[i + 2] = color$$1.b;
+        pixels[i + 3] = F.clamp(Math.floor(color$$1.a * 256));
+    });
+};
+
+F.gradient = F.duotone;
+
 F.tint = function () {
     var redTint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     var greenTint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
@@ -2471,9 +2496,7 @@ F.tint = function () {
 };
 
 F.clamp = function (num) {
-    if (num < 0) return 0;
-    if (num > 255) return 255;
-    return num;
+    return Math.min(255, num);
 };
 /**
  * 

diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js
@@ -1219,7 +1219,7 @@ var color = {
         return this.gray(this.RGBtoYCrCb(r, g, b).y);
     },
     brightness: function brightness(r, g, b) {
-        return r * 0.2126 + g * 0.7152 + b * 0.0722;
+        return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722);
     },
     RGBtoYCrCb: function RGBtoYCrCb(r, g, b) {
 
@@ -1233,7 +1233,7 @@ var color = {
         var Cb = 0.564 * (b - Y);
         var Cr = 0.713 * (r - Y);
 
-        return { y: Math.ceil(Y), cr: Cr, cb: Cb };
+        return { y: Y, cr: Cr, cb: Cb };
     },
     YCrCbtoRGB: function YCrCbtoRGB(y, cr, cb, bit) {
 
@@ -2244,6 +2244,9 @@ function makeFilter(filter) {
 
     var filterFunction = F[filterName];
 
+    if (!filterFunction) {
+        throw new Error(filterName + ' is not filter. please check filter name.');
+    }
     return filterFunction.apply(filterFunction, params);
 }
 
@@ -2304,6 +2307,7 @@ F.multi = function () {
     filters = filters.map(function (f) {
         return makeFilter(f);
     });
+
     return function (bitmap) {
         return filters.reduce(function (bitmap, f) {
             return f(bitmap);
@@ -2460,6 +2464,27 @@ F.bitonal = function (darkColor, lightColor) {
     });
 };
 
+F.duotone = function (gradientColor) {
+    var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 256;
+
+    var colors = color.gradient(gradientColor, scale).map(function (c) {
+        return color.parse(c);
+    });
+
+    return pack$1(function (pixels, i) {
+        var colorIndex = F.clamp(color.brightness(pixels[i], pixels[i + 1], pixels[i + 2]));
+        var newColorIndex = F.clamp(Math.floor(colorIndex * (scale / 256)));
+        var color$$1 = colors[newColorIndex];
+
+        pixels[i] = color$$1.r;
+        pixels[i + 1] = color$$1.g;
+        pixels[i + 2] = color$$1.b;
+        pixels[i + 3] = F.clamp(Math.floor(color$$1.a * 256));
+    });
+};
+
+F.gradient = F.duotone;
+
 F.tint = function () {
     var redTint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     var greenTint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
@@ -2473,9 +2498,7 @@ F.tint = function () {
 };
 
 F.clamp = function (num) {
-    if (num < 0) return 0;
-    if (num > 255) return 255;
-    return num;
+    return Math.min(255, num);
 };
 /**
  * 

diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js
diff --git a/index.html b/index.html
@@ -660,6 +660,12 @@ <h1> Image Filter </h1>
                 <div>
                     <button type="button" onclick="view_histogram()">Histogram</button>
                 </div>                
+                <div>
+                        <button type="button" onclick="filter_image(['gradient', 'black, yellow'])">duotone(red, yellow)</button>
+                </div>                
+                <div>
+                    <button type="button" onclick="filter_image(['gradient', 'black, white', 2])">duotone(black, white)</button>
+                </div>                                
                 <div>
                     <button type="button" onclick="filter_image(['grayscale', +document.getElementById('scale-value').value])">Gray</button>
                     <input type="range" min="0" max="200" step="1" value="100" id="scale-value" />
@@ -955,6 +961,8 @@ <h1 class="title">Default Html Sample </h1>
         var ImageFilter = CodeMirrorColorPicker.ImageFilter;
         document.getElementById('sampled-image').src = URL.createObjectURL(file);
 
+        console.log(args);
+
         Color.ImageToURL(file, ImageFilter.merge(args), function (url) {
             document.getElementById('filtered-image').src = url;
         })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.7.16",
+  "version": "1.7.17",
   "description": "colorpicker for codemirror",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

diff --git a/src/util/Color.js b/src/util/Color.js
@@ -521,7 +521,7 @@ const color = {
         return this.gray(this.RGBtoYCrCb(r, g, b).y);
     },
     brightness(r, g, b) {
-        return r * 0.2126 + g * 0.7152 + b * 0.0722;
+        return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722);
     },
     RGBtoYCrCb(r, g, b) {
 
@@ -532,7 +532,7 @@ const color = {
         const Cb = 0.564 * (b - Y)
         const Cr = 0.713 * (r - Y)
 
-        return { y: Math.ceil(Y), cr: Cr, cb: Cb };
+        return { y: Y, cr: Cr, cb: Cb };
     },
     YCrCbtoRGB(y, cr, cb, bit) {
 

diff --git a/src/util/ImageFilter.js b/src/util/ImageFilter.js
@@ -47,6 +47,9 @@ function makeFilter(filter) {
 
     const filterFunction = F[filterName];
 
+    if (!filterFunction) {
+        throw new Error(`${filterName} is not filter. please check filter name.`)
+    }
     return filterFunction.apply(filterFunction, params);
 }
 
@@ -89,11 +92,9 @@ function putBitmap(bitmap, subBitmap, area) {
     return Canvas.putBitmap(bitmap, subBitmap, area);
 }
 
-
 let F = {};
 let ImageFilter = F
 
-
 /** 
  * 
  * multiply filters
@@ -105,6 +106,7 @@ F.multi = function (...filters) {
     filters = filters.map(f => {
         return makeFilter(f);
     })
+
     return function (bitmap) {
         return filters.reduce((bitmap, f) => {
             return f(bitmap);
@@ -247,9 +249,28 @@ F.bitonal = function (darkColor, lightColor, threshold = 100) {
             pixels[i + 2] = lightColor.b;
         }
     })
+}
+
 
+F.duotone = function (gradientColor, scale = 256) {
+    let colors = Color.gradient(gradientColor, scale).map(c => {
+        return Color.parse(c)
+    })
+
+    return pack((pixels, i) => {
+        const colorIndex = F.clamp(Color.brightness(pixels[i] , pixels[i + 1] , pixels[i + 2]))
+        const newColorIndex = F.clamp(Math.floor(colorIndex * (scale / 256)))
+        const color = colors[newColorIndex]
+
+        pixels[i] = color.r;
+        pixels[i + 1] = color.g;
+        pixels[i + 2] = color.b;
+        pixels[i + 3] = F.clamp(Math.floor(color.a * 256));
+    })
 }
 
+F.gradient = F.duotone;
+
 F.tint = function (redTint = 1, greenTint = 1, blueTint = 1) {
     return pack((pixels, i) => {
         pixels[i] += (255 - pixels[i]) * redTint;
@@ -260,9 +281,7 @@ F.tint = function (redTint = 1, greenTint = 1, blueTint = 1) {
 }
 
 F.clamp = function (num) {
-    if (num < 0) return 0 
-    if (num > 255) return 255 
-    return num 
+    return Math.min(255, num)
 }
 /**
  *