let recolor take the colors from another image

Author: matmen

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### New
 
 - **`Image.linearGradient(width, height, { stops, angle })`** and **`Image.radialGradient(width, height, { stops, x, y, radius })`**: images with a gradient, with the angle like CSS' `linear-gradient()`. `stops` are positions and colors like `Colors.gradient()` takes them, or just the colors, evenly spaced.
+- **`image.recolor(otherImage)`**: takes the colors from another image of the same size and keeps the alpha. With a gradient it fills a shape, e.g. gradient text: `text.recolor(Image.linearGradient(text.width, text.height, { stops: [0x22d3eeff, 0xfb923cff], angle: 90 }))`.
 
 ## 3.18.0
 

src/image.ts

@@ -1508,9 +1508,31 @@ export class Image {
      * or tints it: `image.recolor(0xffffffff)` makes every pixel white, keeping its transparency
      * @param color The color to use, its alpha is ignored
      */
-    recolor(color: Color): this {
+    recolor(color: Color): this;
+    /**
+     * Sets the RGB of every pixel to the RGB of the same pixel of another image, keeping each pixel's own alpha. With a
+     * gradient this fills a shape with it, e.g. gradient text:
+     * `text.recolor(Image.linearGradient(text.width, text.height, { stops: [0x22d3eeff, 0xfb923cff], angle: 90 }))`
+     * @param colors The image to take the colors from, it has to have the same size. Its alpha is ignored
+     */
+    recolor(colors: Image): this;
+    recolor(colorOrImage: Color | Image): this {
+        if (colorOrImage instanceof Image) {
+            const colors = colorOrImage;
+            if (colors.width !== this.width || colors.height !== this.height)
+                throw new RangeError(`The image to take the colors from has to be ${this.width}x${this.height}, not ${colors.width}x${colors.height}`);
+            // (the gain map's resolution gets the colors at its resolution)
+            if (this.__gain_map__) return this.__recolor__(image => image.recolor(image.width === colors.width && image.height === colors.height ? colors : colors.clone().resize(image.width, image.height)));
+            const from = colors.bitmap, to = this.bitmap;
+            for (let i = 0; i < to.length; i += 4) {
+                to[i] = from[i];
+                to[i + 1] = from[i + 1];
+                to[i + 2] = from[i + 2];
+            }
+            return this;
+        }
+        const color = checkColor(colorOrImage);
         if (this.__gain_map__) return this.__recolor__(image => image.recolor(color));
-        color = checkColor(color);
         const r = color >>> 24, g = color >> 16 & 0xff, b = color >> 8 & 0xff;
         for (let i = 0; i < this.bitmap.length; i += 4) {
             this.bitmap[i] = r;

tests/regressions.js

@@ -613,8 +613,9 @@ const rgba = (image, x, y) => Image.colorToRGBA(image.getPixelAt(x, y));
         assert(Buffer.from(await map.encode()).equals(Buffer.from(await map.encode({}))), 'GainMap.encode() without arguments');
     }
 
-    // gradients
+    // gradients and recolor with an image
     {
+        const {GainMap} = require('..');
         const px = (image, x, y) => Array.from(image.bitmap.subarray((y * image.width + x) * 4, (y * image.width + x) * 4 + 4));
         const throws = (fn, type, message) => {
             let error = null;
@@ -659,6 +660,20 @@ const rgba = (image, x, y) => Image.colorToRGBA(image.getPixelAt(x, y));
             'zero radius': () => Image.radialGradient(2, 2, {stops: [1, 2], radius: 0}),
             'NaN center': () => Image.radialGradient(2, 2, {stops: [1, 2], x: NaN})
         })) throws(call, RangeError, name);
+
+        // recolor(image) takes the RGB, keeps the alpha
+        const shape = new Image(4, 1).fill(x => [0xffffff00, 0xffffff40, 0xffffff80, 0xffffffff][x]);
+        const filled = shape.clone().recolor(Image.linearGradient(4, 1, {stops: [0xff0000ff, 0x0000ffff], angle: 90}));
+        const colors = Image.linearGradient(4, 1, {stops: [0xff0000ff, 0x0000ffff], angle: 90});
+        for (let x = 0; x < 4; x++)
+            assert(px(filled, x, 0).join() === [...px(colors, x, 0).slice(0, 3), px(shape, x, 0)[3]].join(), `recolor(image), x ${x}`);
+        assert(px(shape.clone().recolor(new Image(4, 1).fill(0x112233ff)), 3, 0).join() === '17,34,51,255', 'recolor(image) with a flat image');
+        throws(() => shape.clone().recolor(new Image(3, 1)), RangeError, 'recolor(image) with another size');
+        assert(shape.clone().recolor(0x336699ff).bitmap[0] === 0x33, 'recolor(color) still works');
+        const mapped = new Image(8, 8).fill(0xffffffff);
+        mapped.gainMap = new GainMap(new Image(4, 4).fill(0x808080ff), {gainMapMin: 0, gainMapMax: 2});
+        mapped.recolor(Image.linearGradient(8, 8, {stops: [0xff0000ff, 0x0000ffff], angle: 90}));
+        assert(px(mapped, 0, 0)[0] > 200 && px(mapped, 7, 0)[2] > 200 && mapped.gainMap && mapped.gainMap.width === 4, 'recolor(image) keeps the gain map');
     }
 
     // Colors: the color helpers, and the deprecated Image ones they replaced, give the same values