乐趣区

关于html5:使用uniapp的canvas绘制页面海报

都是 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
      },
退出移动版