设置名字的第一个字为默认头像

在自己查找资料的时候看了很多博客，真正对于自己希望看的博客，或者说是便捷自己开发。

都是先放一个效果图在文章的开头，这样才能让读者知道这篇文章是否对自己有用。

先上项目中实现的效果图：

查看F12得到输出的信息：

废话不多说，上代码：（将canvas转换成 file类型）

html部分：

<canvas ref="headCanvas" style="display:none"></canvas>

js部分：

var fileName = userName + ".jpg";    //vm.addUserName
var firstName = fileName.charAt(0);
var fontSize = 60;
var fontWeight = 'bold';
var canvas =  this.$refs.headCanvas;
//var canvas = document.getElementById('headImg');
canvas.width = 120;
canvas.height = 120;
var context = canvas.getContext('2d');
context.fillStyle = '#F7F7F9';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#605CA8';
context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
context.textAlign = 'center';
context.textBaseline="middle";
context.fillText(firstName, fontSize, fontSize);
var dataurl = canvas.toDataURL("image/png");
var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);
while (n--) {u8arr[n] = bstr.charCodeAt(n);
}
var file = new File([u8arr], fileName, {type: mime});
file.lastModifiedDate = new Date();
console.info(file);

这样就能达到效果图了。。

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

封装默认头像组件 - vue3
需求:在用户没有上传头像时,使用-用户名的最后一个字当默认头像子组件: <template><view class="defaultPic" :style=&q ...
sublime后缀_在sublime text中如何设置某种扩展名文件的默认语法
下面由sublime教程栏目给大家介绍在sublime text中设置某种扩展名文件的默认语法,希望对需要的朋友有所帮助! 对于正常扩展名(后缀)的文件,sublime text都能识别. 对于其他不 ...
【1024】用Python画CSDN的默认头像
[1024]用Python画CSDN的默认头像前言作为程序员,基本上都用过CSDN.CSDN上有海量的技术博客,也有各种各样的分类社区,提供资源下载等,是非常适合程序员学习和交流的好平台. 102 ...
R语言ggplot2可视化绘制线图（line plot）、使用gghighlight包突出高亮线图的满足条件的线图、设置高亮线图不显示默认自动显示的文本标签（use_direct_label）
R语言ggplot2可视化绘制线图(line plot).使用gghighlight包突出高亮线图的满足条件的线图.设置高亮线图不显示默认自动显示的文本标签(use_direct_label = FA ...
Slog42_支配vue框架初阶项目之博客网站-单页-默认头像的布局和定位
ArthurSlog SLog-42 Year·1 Guangzhou·China Aug 19th 2018 GitHub 掘金主页简书主页 segmentfault 从业之路不同机缘也不同人 ...
利用startup.m文件设置matlab的Current Folder的默认文件夹
转载自:新浪博客电磁兼容之家的博客利用startup.m文件设置matlab的Current Folder的默认文件夹 startup文件是一个特殊的m文件,matlab在启动以后就会寻找其路径下的 ...
如何删除微软账户下的历史头像,及恢复默认头像
每次修改微软头像时,总会保存历史头像,就像这样如何删除? 打开此电脑,并在文件资源管理器中输入%appdata%\Microsoft\Windows\AccountPictures Enter后弹出 ...
Android Studio 设置打开layout.xml文件的默认视图
Android Studio 设置打开layout.xml文件的默认视图 Android Studio 设置打开layout.xml文件的默认视图 androd studio 在使用的时候打开我们自己 ...
Android 9.0 设置讯飞语音引擎为默认tts语音播报引擎
1.前言在9.0的系统rom定制化开发中,在产品开发中,一些内置的app需要用到tts语音播报功能,所以需要用到讯飞语音引擎作为默认的系统tts语音引擎功能,所以就需要了解系统关于tts语音引擎默 ...
java图片头像代码_用Java和OpenCV生成Github默认头像
前言刚刚过完年,把这样那样的事情忙完,就赶紧把博客剩下的主要功能都先做完了,感觉一身轻松. 闲下来了就抽空看看Github上的项目,偶然间发现Github的默认头像很有特色,它并不像其它的网站一样使 ...

设置名字的第一个字为默认头像

html部分：

js部分：

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

最新文章

热门文章