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;
}
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

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> {
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);
});