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

Composer: Select transparency fill color depending on brightness (#1939)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-07-08 15:00:25 +02:00
parent 594701c02e
commit a89b050e89
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/util/colors.ts
View File

@ -171,6 +171,7 @@ export async function getAverageColor(url: string): Promise<[number, number, num
// eslint-disable-next-line no-cond-assign // eslint-disable-next-line no-cond-assign
while ((i += blockSize * 4) < length) { while ((i += blockSize * 4) < length) {
if (data.data[i + 3] === 0) continue; // Ignore fully transparent pixels
++count; ++count;
rgb[0] += data.data[i]; rgb[0] += data.data[i];
rgb[1] += data.data[i + 1]; rgb[1] += data.data[i + 1];
@ -184,6 +185,12 @@ export async function getAverageColor(url: string): Promise<[number, number, num
return rgb; return rgb;
} }
export function isDarkColor(rgbColor: [number, number, number]) {
const [r, g, b] = rgbColor;
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
return luma < 128;
}
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
// Function was adapted from https://github.com/telegramdesktop/tdesktop/blob/35ff621b5b52f7e3553fb0f990ea13ade7101b8e/Telegram/SourceFiles/data/data_wall_paper.cpp#L518 // Function was adapted from https://github.com/telegramdesktop/tdesktop/blob/35ff621b5b52f7e3553fb0f990ea13ade7101b8e/Telegram/SourceFiles/data/data_wall_paper.cpp#L518
export function getPatternColor(rgbColor: [number, number, number]) { export function getPatternColor(rgbColor: [number, number, number]) {

9
src/util/imageResize.ts
View File

@ -1,3 +1,5 @@
import { getAverageColor, isDarkColor } from './colors';
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;
const img = new Image(); const img = new Image();
@ -53,15 +55,20 @@ async function scale(
if (bitmap.height !== height || bitmap.width !== width) { if (bitmap.height !== height || bitmap.width !== width) {
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 fillColor = isDarkColor(averageColor) ? '#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;
canvas.height = bitmap.height; canvas.height = bitmap.height;
const ctx2D = canvas.getContext('2d')!;
ctx2D.fillStyle = fillColor;
ctx2D.fillRect(0, 0, canvas.width, canvas.height);
const ctx = canvas.getContext('bitmaprenderer'); const ctx = canvas.getContext('bitmaprenderer');
if (ctx) { if (ctx) {
ctx.transferFromImageBitmap(bitmap); ctx.transferFromImageBitmap(bitmap);
} else { } else {
canvas.getContext('2d')!.drawImage(bitmap, 0, 0); ctx2D.drawImage(bitmap, 0, 0);
} }
canvas.toBlob(res, outputType); canvas.toBlob(res, outputType);
}); });