使用uniapp的canvas绘制页面海报
站长
· 阅读数 21
都是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
},