canvas生成姓氏头像，上传七牛后传给后端

canvas生成姓氏头像，上传七牛后传给后端

1.需求：像苹果手机的通讯录一样，如果没有上传头像就读取他的姓氏。
需要前端生成头像后先上传七牛，将拿到的资源id传给后端存到数据库，用于之后的信息读取
2.效果图：

3.实现
大家有听过html2canvas吗？刚开始拿到需求的时候我首先想到的是html2canvas，试过之后发现并不是很合适，这个更偏向于将dom元素转化成图片，而我们需要的是创建图片并用文字填充，最后觉得还是canvas更简单，话不多说，上代码，我的项目用的是vue，这里以vue为例：
实现思路：在姓氏改变的时候生成头像，之后上传

<el-form size="small" ref="form" :model="form" :rules="rule" label-position="top" label-width="80px" @submit.native.prevent>
			<el-row>
				<el-col >
					<el-form-item label="姓氏" prop="lastName">
						<el-input  v-model="form.lastName" @change="lastFirstChangeEvent"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.lastName||form.portrait">
				<el-col >
					<el-form-item label="头像" prop="portraitResourceId">
						<div id="head-img"></div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

lastFirstChangeEvent(params) {
				var that = this;
				var colorList = ["#0077FF", "#5FADF3", "#5952BB", "#843952", "#ea4c89", "#F2292B", "#FFC89B", "#4C09C1", "#FEA701", "#9f7563", "#00CB00", "#A2CB00", "#50E3C2", "#9FA6C7"];
				var colorIdx = Math.floor(Math.random() * 10);
				var colorRgba = colorList[colorIdx]; //数组随机颜色
				var canvas = document.createElement('canvas');
				if(canvas == null) return false;
				canvas.width = 88;
				canvas.height = 88;
				var context = canvas.getContext('2d');
				context.fillStyle = colorRgba;//背景色，这里是给头像随机生成个背景色
				context.fillRect(0, 0, 88, 88); //正方形左上角的x,y,宽，高
				context.font = "30px sans-serif"; //文本字体大小
				context.fillStyle = "#FFFFFF"; //文本字体颜色
				context.textAlign = 'center'; //文本水平对齐方式
				context.textBaseline = 'middle'; //文本垂直方向，基线位置 
				context.fillText(that.form.lastName, 44, 44); //文本内容，X,Y坐标开始
				var idName = document.getElementById('head-img');
				idName.innerHTML = '';
				idName.appendChild(canvas);//将生成的头像放到写好的dom
				//下面是上传七牛前准备,如果没有后面的需求到此就结束了
				canvas.toBlob((blob)=>{
		              let filename = new Date().getTime()+".png";
		              that.filesParmas.files={
		               name: filename,
		               raw:new File([blob], filename, {type: 'image/png',name: filename}),
		               self:true
		              };
		              that.getQiniuCallbackUpToken();//上传七牛前需要想后端获取token
		         });
			},
			//			    异步上传token
			getQiniuCallbackUpToken(row) {
				var that = this;
				this.axiosXHR({
					type: "get",
					url: "/file/getQiniuCallbackUpToken",
					params: {
						bucketName: "PIC",
						originName: this.files.name
					},
					success: function(res) {
						that.fileLoad(res.data.data,row);
					}
				})
			},
			//			    上传青牛服务器
			fileLoad(backData,row) {
				if(backData.uploadUrl){
					params= params|| {};
					var filesParmas=this.filesParmas;
					let param = new FormData(); //创建form对象
					param.append('token', backData.token); //通过append向form对象添加数据 
					param.append('key', backData.key); //通过append向form对象添加数据 
					param.append('x:boolPublic', true); //通过append向form对象添加数据 
					param.append('x:description', filesParmas.description); //通过append向form对象添加数据 
					param.append('file', filesParmas.files.raw); //通过append向form对象添加数据 
					param.append('x:originName',filesParmas.files.raw.name);
					let config = {
						headers: {
							'Content-Type': 'multipart/form-data'
						}
					};   
					this.$http.post(backData.uploadUrl, param, config)
						.then(res => {
							if(res.data.status == 0) {
								//成功
							} else {
								//失败
							}
						})
				}else{
					//失败
				}
			}

搞定！！！