40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
// Copied from
|
|
// https://github.com/nolanlawson/emoji-picker-element/blob/04f490a/src/picker/utils/testColorEmojiSupported.js
|
|
|
|
import { FONT_FAMILY } from '../_static/fonts'
|
|
|
|
const getTextFeature = (text, color) => {
|
|
try {
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = canvas.height = 1
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
ctx.textBaseline = 'top'
|
|
ctx.font = `100px ${FONT_FAMILY}`
|
|
ctx.fillStyle = color
|
|
ctx.scale(0.01, 0.01)
|
|
ctx.fillText(text, 0, 0)
|
|
|
|
return ctx.getImageData(0, 0, 1, 1).data
|
|
} catch (e) { /* ignore, return undefined */ }
|
|
}
|
|
|
|
const compareFeatures = (feature1, feature2) => {
|
|
const feature1Str = [...feature1].join(',')
|
|
const feature2Str = [...feature2].join(',')
|
|
return feature1Str === feature2Str && feature1Str !== '0,0,0,0'
|
|
}
|
|
|
|
export function testColorEmojiSupported (text) {
|
|
// Render white and black and then compare them to each other and ensure they're the same
|
|
// color, and neither one is black. This shows that the emoji was rendered in color.
|
|
const feature1 = getTextFeature(text, '#000')
|
|
const feature2 = getTextFeature(text, '#fff')
|
|
|
|
const supported = feature1 && feature2 && compareFeatures(feature1, feature2)
|
|
if (!supported) {
|
|
console.log('Filtered unsupported emoji via color test', text)
|
|
}
|
|
return supported
|
|
}
|