ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Composer: Select transparency fill color (follow-up) (#1942)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-07-10 12:37:15 +02:00
parent e6d0a7284d
commit 07a8100b93
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/util/colors.ts
View File

@ -185,10 +185,10 @@ export async function getAverageColor(url: string): Promise<[number, number, num
return rgb; return rgb;
} }
export function isDarkColor(rgbColor: [number, number, number]) { export function getColorLuma(rgbColor: [number, number, number]) {
const [r, g, b] = rgbColor; const [r, g, b] = rgbColor;
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
return luma < 128; return luma;
} }
// eslint-disable-next-line max-len // eslint-disable-next-line max-len

13
src/util/imageResize.ts
View File

@ -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> { export function scaleImage(image: string | Blob, ratio: number, outputType: string = 'image/png'): Promise<string> {
const url = image instanceof Blob ? URL.createObjectURL(image) : image; 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 throw new Error('Image bitmap resize not supported!'); // FF93 added support for options, but not resize
} }
const averageColor = await getAverageColor(img.src); 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) => { return await new Promise((res) => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = bitmap.width; 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', img: HTMLImageElement, width: number, height: number, step: number = 0.5, outputType: string = 'image/png',
): Promise<Blob | null> { ): Promise<Blob | null> {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
@ -117,6 +119,11 @@ function steppedScale(
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 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) => { return new Promise((resolve) => {
canvas.toBlob(resolve, outputType); canvas.toBlob(resolve, outputType);
}); });