共计 3973 个字符，预计需要花费 10 分钟才能阅读完成。
都是 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
},
正文完
