ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add distance check from white for token rich link previews (#7152)

Browse Source 
* feat: lower white levels if too close

* testing and parameterization

* Update getColor.ts

* Update getColor.test.ts

* Update getColor.ts

* Update getColor.test.ts

* Update getColor.test.ts
This commit is contained in:
Brendan Wong 2023-08-17 13:30:58 -04:00 committed by GitHub
parent 024bbce9a4
commit 966b02b2de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
functions/api/image/tokens/[[index]].tsx
View File

@ -28,7 +28,7 @@ export const onRequest: PagesFunction = async ({ params, request }) => {
return new Response('Token not found.', { status: 404 }) return new Response('Token not found.', { status: 404 })
} }
const [fontData, palette] = await Promise.all([getFont(), getColor(data.ogImage)]) const [fontData, palette] = await Promise.all([getFont(), getColor(data.ogImage, true)])
const networkLogo = getNetworkLogoUrl(networkName.toUpperCase()) const networkLogo = getNetworkLogoUrl(networkName.toUpperCase())

6
functions/utils/getColor.test.ts
View File

@ -19,6 +19,12 @@ test('should return the average color of a white PNG image', async () => {
expect(color).toEqual([255, 255, 255]) expect(color).toEqual([255, 255, 255])
}) })
test('should return the average color of a white PNG image with whiteness dimmed', async () => {
const image = 'https://www.cac.cornell.edu/wiki/images/4/44/White_square.png'
const color = await getColor(image, true)
expect(color).toEqual(DEFAULT_COLOR)
})
test('should return the average color of a black JPG image', async () => { test('should return the average color of a black JPG image', async () => {
const image = const image =
'https://imageio.forbes.com/specials-images/imageserve/5ed6636cdd5d320006caf841/0x0.jpg?format=jpg&width=1200' 'https://imageio.forbes.com/specials-images/imageserve/5ed6636cdd5d320006caf841/0x0.jpg?format=jpg&width=1200'

14
functions/utils/getColor.ts
View File

@ -4,7 +4,7 @@ import PNG from 'png-ts'
import { DEFAULT_COLOR, predefinedTokenColors } from '../constants' import { DEFAULT_COLOR, predefinedTokenColors } from '../constants'
export default async function getColor(image: string | undefined) { export default async function getColor(image: string | undefined, checkDistance = false) {
if (!image) { if (!image) {
return DEFAULT_COLOR return DEFAULT_COLOR
} }
@ -17,13 +17,13 @@ export default async function getColor(image: string | undefined) {
const arrayBuffer = Buffer.from(buffer) const arrayBuffer = Buffer.from(buffer)
const type = data.headers.get('content-type') ?? '' const type = data.headers.get('content-type') ?? ''
return getAverageColor(arrayBuffer, type) return getAverageColor(arrayBuffer, type, checkDistance)
} catch (e) { } catch (e) {
return DEFAULT_COLOR return DEFAULT_COLOR
} }
} }
function getAverageColor(arrayBuffer: Uint8Array, type?: string) { function getAverageColor(arrayBuffer: Uint8Array, type: string, checkDistance: boolean) {
let pixels let pixels
switch (type) { switch (type) {
case 'image/png': { case 'image/png': {
@ -63,5 +63,13 @@ function getAverageColor(arrayBuffer: Uint8Array, type?: string) {
g = Math.floor(g / (pixelCount - transparentPixels)) g = Math.floor(g / (pixelCount - transparentPixels))
b = Math.floor(b / (pixelCount - transparentPixels)) b = Math.floor(b / (pixelCount - transparentPixels))
if (checkDistance) {
const distance = Math.sqrt(Math.pow(r - 255, 2) + Math.pow(g - 255, 2) + Math.pow(b - 255, 2))
if (distance < 50) {
return DEFAULT_COLOR
}
}
return [r, g, b] return [r, g, b]
} }