工具函数(截取文本第一个字为图片)_css 获取第一个字-优快云博客

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <img />
    <script>
        const img = document.querySelector('img')
        const textToImage = (params) => {
            const { text, size = 80, bg = '#4F54FF', font = 24, fontColor = '#fff' } = params
            if (!text.length) return console.error('不能为空字符串!');
            if(font >= size) return console.error('文本字体大小不可超过图片大小!')
            //取第一个字符
            const firstText = text.slice(0, 1)
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d')
            //canvas样式宽高
            canvas.style.width = size
            canvas.style.height = size
            //canvas实际内容宽高
            canvas.width = size * devicePixelRatio
            canvas.height = size * devicePixelRatio
            //根据设备倍率缩放适应图片大小
            ctx.scale(devicePixelRatio, devicePixelRatio)
            const x = size / 2;
            const y = size / 2;
            //设置图片背景色
            ctx.fillStyle = bg;
            //绘制圆形
            ctx.arc(x, y, size, 0, 2 * Math.PI);
            ctx.fill();
            //绘制文本
            ctx.font = `bold ${font}px  Arial`;
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = fontColor;
            ctx.fillText(firstText,x, y);
            return canvas.toDataURL()
        }
        img.src = textToImage({ text: '仙古梦回', size: 60 })
    </script>
</body>

</html>

示例：