都是canvas的简单应用，其中一个需求没有完成-->让头像的图片处理成马赛克风格。有的话指点一下~~//画海报drawPicture(){letewmUrl=`业务需求`//生成二维码qrcode.toDataURL(ewmUrl,{type:"image/png",//typequality:0.5,//图像质量0到1之间的一个数width:130,//高度height:130,//宽度errorCorrectionLevel:"L",//容错率margin:1,//外边距color:{dark:"#000",//前景颜色光:"#fff"//背景颜色}}).then(imgData=>{this.baseCode=imgData})//Canvasletctx=uni.createCanvasContext('myCanvas',this);//画布宽高letimgW=this.$refs.draw_page.offsetWidth;让imgH=this.$refs.draw_page.offsetHeight;这个.cwidth=imgW*0.9;this.cheight=imgH+125;//画布背景色ctx.fillStyle='#fff';ctx.fillRect(0,0,this.cwidth,this.ch八）;//图片letimgUrl=this.getSexDefaultImg//获取图片信息，按照原图绘制，否则图片会变形uni.getImageInfo({src:imgUrl,success:info=>{//绘制顶部背景图片logoImgctx.drawImage(this.logoImg,0,0,this.cwidth,80)//绘制头像ctx.drawImage(info.path,this.cwidth/2-35,45,70,70)//封头像（做马赛克，没做）ctx.beginPath()ctx.fillStyle='rgba(242,176,53,1)'ctx.setStrokeStyle('#fff')ctx.arc(this.cwidth/2,80,35,0,Math.PI*2)ctx.fill()//绘制密封文字ctx.font='16rpxMedium'//字体大小ctx.fillStyle='#fff'//字体填充颜色ctx.fillText('Dense',this.cwidth/2-8,85)//绘制个人信息---名字ctx.font="18rpxMedium"//字体大小ctx.fillStyle='#212121'//字体填充颜色让name_position=this.cwidth/2-this.jlUserInfo.name.length/2*16letstr=this.jlUserInfo.name.split('').map((item)=>{return'*'})let_name=str.join('')ctx.fillText(_name,name_position+(this.jlUserInfo.name.length*3),150);//绘制年龄...ctx.font='12rpxMedium'//字体大小ctx.fillStyle='#212121'//字体填充颜色letage_position=this.cwidth/6-this.jlUserInfo.age.length/2*12ctx.fillText(this.jlUserInfo.age,age_position,180)//画竖线ctx.font='12rpxMedium'//字体大小ctx.fillStyle='#212121'//字体填充颜色ctx.fillText('|',this.cwidth/3,180)//绘图体验...ctx.font='12rpxMedium'//字体大小ctx.fillStyle='#212121'//字体填充颜色letex_info=this.jlUserInfo.experienceYear=='没有经验'？'否'：this.jlUserInfo.experienceYearletex_position=this.cwidth/2-ex_info.length/2*12ctx.fillText(ex_info,ex_position+3,180)//绘制垂直线ctx.font='12rpxMedium'//字体大小ctx.fillStyle='#212121'//字体填充颜色ctx.fillText('|',this.cwidth/3*2-12,180)//绘图教育...ctx.font='12rpxMedium'//字体大小ctx.fillStyle='#212121'//字体填充颜色letedu_position=this.cwidth/3*2+this.cwidth/6-this.jlUserInfo.educationTypeName.length/2*12ctx.fillText(this.jlUserInfo.educationTypeName,edu_position,180)//绘制单独的色块ctx.fillStyle='#faf8f5';ctx.fillRect(0,200,this.cwidth,10);//绘制求职意向ctx.font='17rpxMedium'//字体大小ctx.fillStyle='#000'//字体填充颜色ctx.fillText('求职意向',20,240)//期望位置ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#757575'//字体填充颜色ctx.fillText(`desiredposition:${this.qzyxData.jobPositionThirdName?this.qzyxData.jobPositionThirdName:''}`,20,270)//期望面积ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#757575'//字体填充颜色letcity=this.likeCityif(city.length>16){//判断长度city=city.substring(0,17)+'...'}ctx.fillText(`Expectedarea:${city}`,20,290)//期望工资ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#757575'//字体填充颜色letprice=`${this.qzyxData.salaryMin}-${this.qzyxData.salaryMax}K`if(!this.qzyxData.salaryMin){//判断显示方法price=''}ctx.fillText(`期望薪资：${price}`,20,310)//求职状态ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#757575'//字体填充颜色letjob_status=this.stateTypeNameList[this.indexVal]?this.stateTypeNameList[this.indexVal]:''if(!this.qzyxData.salaryMin){//判断显示价格=''}ctx.fillText(`jobstatus:${job_status}`,20,330)//绘制单独的色块ctx.fillStyle='#faf8f5';ctx.fillRect(0,350,this.cwidth,10);//开始绘制二维码区域//左引导文字ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#000'//字体填充颜色ctx.fillText('啦啦啦啦',this.cwidth/3-49,400)ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#000'//字体填充颜色ctx.fillText('【长按识别二维码】',this.cwidth/3-67,420)ctx.font='14rpxMedium'//字体大小ctx.fillStyle='#757575'//字体填充颜色ctx.fillText('获取更多信息，进一步沟通',this.cwidth/3-84,440)//在右边绘制二维码ctx.drawImage(this.baseCode,this.cwidth/3*2,370,100,100)}})setTimeout(()=>{//uni-appmustadd加个延迟，不然显示不出来亲测ctx.stroke();letthat=thisctx.draw(true,(ret)=>{//必须加uniapp，如果没有的话这里不能显示了，比原来的好Displayuni.canvasToTempFilePath({//将画布保存为图片canvasId:'myCanvas',quality:1,complete(res){that.pictureUrl=res.tempFilePath//uni.setStorageSync('filePath',res.tempFilePath)//保存临时文件路径到缓存}})});},100)this.pictureOk=true},
