都是canvas的简略利用，
其中有一个需要没有实现-->让把头像的图片解决成马赛克的款式，我没做进去，起初用色块给遮挡起来了
心愿有会这方面内容的大哥看到的话，指导指导~~
//绘制海报 drawPicture(){ let ewmUrl = `业务需要` //生成二维码 qrcode.toDataURL(ewmUrl, { type: "image/png", //类型 quality: 0.5, //图片品质A Number between 0 and 1 width: 130, //高度 height: 130, //宽度 errorCorrectionLevel: "L", //容错率 margin: 1, //外边距 color: { dark: "#000", //前景色 light: "#fff" //背景色 } }).then(imgData => { this.baseCode = imgData }) //画布 let ctx = uni.createCanvasContext('myCanvas', this); //画布宽高 let imgW = this.$refs.draw_page.offsetWidth; let imgH = this.$refs.draw_page.offsetHeight; this.cwidth = imgW * 0.9; this.cheight = imgH + 125; //画布背景色 ctx.fillStyle='#fff'; ctx.fillRect(0, 0, this.cwidth, this.cheight); //图片 let imgUrl = this.getSexDefaultImg // 获取图片信息, 要依照原图来绘制, 否则图片会变形 uni.getImageInfo({ src: imgUrl, success: info => { //绘制顶部背景图logoImg ctx.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 = '16rpx Medium' // 字体大小 ctx.fillStyle = '#fff' // 字体填充色彩 ctx.fillText('密', this.cwidth/2 - 8, 85) //绘制个人信息---名字 ctx.font = "18rpx Medium" // 字体大小 ctx.fillStyle = '#212121' //字体填充色彩 let name_position = this.cwidth/2 - this.jlUserInfo.name.length/2 * 16 let str = this.jlUserInfo.name.split('').map((item) => { return '*' }) let _name = str.join('') ctx.fillText(_name, name_position + (this.jlUserInfo.name.length * 3), 150); //绘制年纪... ctx.font = '12rpx Medium' // 字体大小 ctx.fillStyle = '#212121' // 字体填充色彩 let age_position = this.cwidth/6 - this.jlUserInfo.age.length/2 * 12 ctx.fillText(this.jlUserInfo.age, age_position, 180) //绘制竖线 ctx.font = '12rpx Medium' // 字体大小 ctx.fillStyle = '#212121' // 字体填充色彩 ctx.fillText('|', this.cwidth/3, 180) //绘制教训... ctx.font = '12rpx Medium' // 字体大小 ctx.fillStyle = '#212121' // 字体填充色彩 let ex_info = this.jlUserInfo.experienceYear == '无教训'? '暂无': this.jlUserInfo.experienceYear let ex_position = this.cwidth/2 - ex_info.length/2 * 12 ctx.fillText(ex_info, ex_position + 3, 180) //绘制竖线 ctx.font = '12rpx Medium' // 字体大小 ctx.fillStyle = '#212121' // 字体填充色彩 ctx.fillText('|', this.cwidth/3*2 - 12, 180) //绘制学历... ctx.font = '12rpx Medium' // 字体大小 ctx.fillStyle = '#212121' // 字体填充色彩 let edu_position = this.cwidth/3*2 + this.cwidth/6 - this.jlUserInfo.educationTypeName.length/2 * 12 ctx.fillText(this.jlUserInfo.educationTypeName, edu_position, 180) //绘制分隔色块 ctx.fillStyle='#faf8f5'; ctx.fillRect(0, 200, this.cwidth, 10); //绘制求职意向 ctx.font = '17rpx Medium' // 字体大小 ctx.fillStyle = '#000' // 字体填充色彩 ctx.fillText('求职意向', 20, 240) //冀望职位 ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#757575' // 字体填充色彩 ctx.fillText(`冀望职位：${this.qzyxData.jobPositionThirdName ? this.qzyxData.jobPositionThirdName : ''}`, 20, 270) //冀望地区 ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#757575' // 字体填充色彩 let city = this.likeCity if(city.length > 16){ //判断长度 city = city.substring(0,17) + '...' } ctx.fillText(`冀望地区：${city}`, 20, 290) //冀望薪资 ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#757575' // 字体填充色彩 let price = `${this.qzyxData.salaryMin}-${this.qzyxData.salaryMax}K` if(!this.qzyxData.salaryMin ){ //判断显示方式 price = '' } ctx.fillText(`冀望薪资：${price}`, 20, 310) //求职状态 ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#757575' // 字体填充色彩 let job_status = this.stateTypeNameList[this.indexVal] ? this.stateTypeNameList[this.indexVal] : '' if(!this.qzyxData.salaryMin ){ //判断显示方式 price = '' } ctx.fillText(`求职状态：${job_status}`, 20, 330) //绘制分隔色块 ctx.fillStyle='#faf8f5'; ctx.fillRect(0, 350, this.cwidth, 10); //开始绘制二维码区域 //左侧疏导文字 ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#000' // 字体填充色彩 ctx.fillText('啦啦啦啦', this.cwidth/3 - 49, 400) ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#000' // 字体填充色彩 ctx.fillText('【长按辨认二维码】', this.cwidth/3 - 67, 420) ctx.font = '14rpx Medium' // 字体大小 ctx.fillStyle = '#757575' // 字体填充色彩 ctx.fillText('获取更多信息，进一步沟通', this.cwidth/3 - 84, 440) //绘制右侧二维码 ctx.drawImage(this.baseCode, this.cwidth/3*2, 370, 100, 100) } }) setTimeout(() => { // uni-app必须加上提早，不然显示不进去， 亲测 ctx.stroke(); let that = this ctx.draw(true,(ret)=>{ //必须加上 uniapp 没这儿玩意儿 显示不进去不比原生 不加能够显示 uni.canvasToTempFilePath({ // 保留canvas为图片 canvasId: 'myCanvas', quality: 1, complete(res) { that.pictureUrl = res.tempFilePath // uni.setStorageSync('filePath',res.tempFilePath) //保留临时文件门路到缓存 } }) }); }, 100) this.pictureOk = true },