Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 1x 1x 1x 1x 1x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 1x | import {createCanvas, registerFont} from 'canvas';
import prng from './prng';
import hashString from './hash-string/hash-string';
registerFont('app/assets/Roboto-Regular.ttf', {family: 'Roboto'});
/**
* Generates a pseudo-random generated profile picture for
* the given username. The first to characters will be
* shown inside the pb.
* @param dim - Dimension of profile picture in pixel
* (will be used for width and height)
* @param username - The username for which to create the pb
* @param offset - Offset for the randomness. Used to creates a
* different picture for the same username
*/
const generateProfilePic = (dim: number,
username: string,
offset: number): Promise<Buffer> => {
// Get a pseudo random number for the username and offset
return hashString(username, offset).then((hash) => {
const rnd = prng(hash);
const canvas = createCanvas(dim, dim);
const ctx = canvas.getContext('2d');
const isInverted = rnd >= 0.5;
const deg: number = Math.floor(rnd * 360);
const textLightness = isInverted ? 90 : 20;
const backLightness = isInverted ? 20 : 90;
const center = Math.floor(dim / 2);
// Fill with gradient
ctx.fillStyle = `hsl(${deg}, 90%, ${backLightness}%)`;
ctx.fillRect(0, 0, dim, dim);
ctx.font = `${center * 1.3}px Roboto`;
ctx.fillStyle = `hsl(${deg}, 90%, ${textLightness}%)`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const text = username.slice(0, 2);
ctx.fillText(text, center, center);
return canvas.toBuffer('image/jpeg', {quality: 0.9});
});
};
export default generateProfilePic;
|