用户名第一个字符设置为默认头像

基础实现方法

//html
<canvas style="background: pink;"></canvas>
//js
let haha = "haha";
let canvas = document.querySelector("canvas");
let oCtx = canvas.getContext("2d");
canvas.width = 40;
canvas.height = 40;
let str = haha.substring(0, 1).toUpperCase();
oCtx.font = "30px 微软雅黑";
oCtx.textBaseline = "middle"
oCtx.textAlign = "center";
oCtx.fillText(str, canvas.width / 2, canvas.height/ 2);
let dataURL = canvas.toDataURL();
console.log(dataURL);

这样会得到图片连接

但是到这里会发现两个问题
1.文字不是垂直居中的
2.通过连接得到的图片没有背景图片

问题解决

垂直居中：

将填充文字的位置修改一下

let textMetrics = oCtx.measureText(str);
let actualBoundingBoxDescent = textMetrics.actualBoundingBoxDescent;
oCtx.fillText(str, canvas.width / 2, (canvas.height + actualBoundingBoxDescent) / 2);
// oCtx.fillText(str, canvas.width / 2, canvas.height/ 2);

在填充文字前面添加加上以下的代码：

oCtx.fillStyle = "pink";
oCtx.fillRect(0, 0, canvas.width, canvas.height);
oCtx.fillStyle = "#fff";    //这行是文字的颜色，不加这样的话，文字会看不出来

最终实现

<canvas></canvas>
<script>let haha = "haha";let canvas = document.querySelector("canvas");let oCtx = canvas.getContext("2d");canvas.width = 40;canvas.height = 40;oCtx.fillStyle = "pink";oCtx.fillRect(0, 0, canvas.width, canvas.height);oCtx.fillStyle = "#fff";let str = haha.substring(0, 1).toUpperCase();oCtx.font = "30px 微软雅黑";// 设置对其方式oCtx.textBaseline = "middle"oCtx.textAlign = "center";let textMetrics = oCtx.measureText(str);let actualBoundingBoxDescent = textMetrics.actualBoundingBoxDescent;oCtx.fillText(str, canvas.width / 2, (canvas.height + actualBoundingBoxDescent) / 2);let dataURL = canvas.toDataURL('image/jpeg', 0.6);console.log(dataURL);
</script>

如有疑问或补充请提出来。
转载请附上链接，谢谢

用户名第一个字符设置为默认头像相关推荐

ODOO 用户默认头像-怎么设置的默认头像
在模型中 from odoo.modules.module import get_module_resourceclass HrEmployeePrivate(models.Model):_name ...
默认访问首页 || 国际化||设置全局字符编码的默认设置
默认访问首页国际化在spring中是这样配置的 1).编写国际化配置文件: 2).使用ResourceBundleMessageSource管理国际化资源文件 3).在页面使用 fmt:messa ...
linux中ll下第一个字符是l,linux ls -l 详解
以root的家目录为例: 可以看到,用ls -l命令查看某一个目录会得到一个7个字段的列表. 第1行:总计(total) Total后面的数字是指当前目录下所有文件所占用的空间总和.可以使用ls –l ...
怎么修改设置路由器默认密码
通常路由器默认的登录账户名与密码都是admin,只要在路由器网络下的用户都可以通过这个默认的路由器账户密码登录路由器管理界面,一般管理员都会修改掉这个默认路由器登录密码,防止用户修改路由器上网参数,设 ...
ad19pcb设置恢复默认_电脑主板BIOS设置详解BIOS知识大全
电脑主板BIOS设置详解-BIOS知识大全什么是电脑BIOS,一般电脑主板都设置了电脑开机后一直按着Del键即可进入BIOS. 系统开机启动 BIOS,即微机的基本输入输出系统(Basic Inpu ...
删除字符串第一个字符 php,php删除字符串第一个字符的方法
摘要腾兴网为您分享:php删除字符串第一个字符的方法,中英翻译,指南针,掌上看家,洋葱数学等软件知识,以及仙剑4秋天,西瓜影音,叭哒漫画,轻加减肥,qq经典头像98个,otcbtc,电子相册软件,巧 ...
如何将Chrome谷歌浏览器的桌面快捷方式和任务栏快捷方式设置成默认打开无痕模式
1.桌面Chrome谷歌浏览器的快捷方式设置成默认打开模式为无痕模式第一步:在桌面上找到Chrome谷歌浏览器图标,右击鼠标,点击最下方属性(R) 第二步:在属性内点击上方菜单栏-[快捷方式],找到 ...
设置门户默认首页提示：此网页包含重定向循环重新加载（去掉portal.php尾巴的办法）
设置门户默认首页提示:此网页包含重定向循环重新加载(去掉portal.php尾巴的办法) 论坛开启了门户,想设置门户为默认主页,可设置好后,你却发现后面多了个"portal.php&quo ...
怎样使用计算机上的高级共享设置密码,win7系统电脑,如何设置共享,共享计算机的用户名和密码怎样设置...
如何设置共享,共享计算机的用户名和密码怎样设置百度文库的东西自己能找到方法的...XP与WIN7如何共享第一,双击桌面上网络图标. 第二,单击上面网络共享中心. 第三,单击左边的更改高级共享设置 ...
excel 插入计算机用户名,Excel中进行设置个性化用户名的操作方法
对于excel爱好者来说 ,了解怎样给excel设置个性化用户名很重要.今天,学习啦小编就教大家在Excel中进行设置个性化用户名的操作方法. Excel中进行设置个性化用户名的操作步骤设置个性化用 ...

用户名第一个字符设置为默认头像

基础实现方法

问题解决

最终实现

用户名第一个字符设置为默认头像相关推荐

最新文章

热门文章