From 07a8100b936d9ec33546b6b3f03edd1e24f47d47 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 10 Jul 2022 12:37:15 +0200
Subject: [PATCH] Composer: Select transparency fill color (follow-up) (#1942)

---
 src/util/colors.ts      |  4 ++--
 src/util/imageResize.ts | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/util/colors.ts b/src/util/colors.ts
index 8cbcd7c7f..e047f21e1 100644
--- a/src/util/colors.ts
+++ b/src/util/colors.ts
@@ -185,10 +185,10 @@ export async function getAverageColor(url: string): Promise<[number, number, num
   return rgb;
 }
 
-export function isDarkColor(rgbColor: [number, number, number]) {
+export function getColorLuma(rgbColor: [number, number, number]) {
   const [r, g, b] = rgbColor;
   const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  return luma < 128;
+  return luma;
 }
 
 // eslint-disable-next-line max-len
diff --git a/src/util/imageResize.ts b/src/util/imageResize.ts
index f6f04e073..b5e26b753 100644
--- a/src/util/imageResize.ts
+++ b/src/util/imageResize.ts
@@ -1,4 +1,6 @@
-import { getAverageColor, isDarkColor } from './colors';
+import { getAverageColor, getColorLuma } from './colors';
+
+const LUMA_THRESHOLD = 240;
 
 export function scaleImage(image: string | Blob, ratio: number, outputType: string = 'image/png'): Promise<string> {
   const url = image instanceof Blob ? URL.createObjectURL(image) : image;
@@ -56,7 +58,7 @@ async function scale(
         throw new Error('Image bitmap resize not supported!'); // FF93 added support for options, but not resize
       }
       const averageColor = await getAverageColor(img.src);
-      const fillColor = isDarkColor(averageColor) ? '#fff' : '#000';
+      const fillColor = getColorLuma(averageColor) < LUMA_THRESHOLD ? '#fff' : '#000';
       return await new Promise((res) => {
         const canvas = document.createElement('canvas');
         canvas.width = bitmap.width;
@@ -81,7 +83,7 @@ async function scale(
   }
 }
 
-function steppedScale(
+async function steppedScale(
   img: HTMLImageElement, width: number, height: number, step: number = 0.5, outputType: string = 'image/png',
 ): Promise<Blob | null> {
   const canvas = document.createElement('canvas');
@@ -117,6 +119,11 @@ function steppedScale(
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   }
 
+  const averageColor = await getAverageColor(img.src);
+  const fillColor = getColorLuma(averageColor) < LUMA_THRESHOLD ? '#fff' : '#000';
+  ctx.fillStyle = fillColor;
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
   return new Promise((resolve) => {
     canvas.toBlob(resolve, outputType);
   });