qrcode 生成二维码并下载 写入自定义文字

cnpm install qrcode@1.2.0 --save
import QRCode from "qrcode"; //引入生成二维码插件
this.getQRCode(item)
getQRCode(item) {
        const _size = 500
        let opts = {
          errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
          type: "image/png",//生成的二维码类型
          quality: 0.3,//二维码质量
          margin: 3,//二维码留白边距
          width: _size,//宽
          height: _size,//高
          text: "名字",//二维码内容
          color: {
            light: "#ffffff"//背景色
          }
        };
        let that = this
        // 将获取到的数据(val)画到msg(canvas)上,加上时间戳动态生成二维码
        QRCode.toCanvas(this.$refs.canvas, 'https://www.baidu.com', opts, function (error) { // 登录链接
          if (error) {
            this.$message.error('二维码生成失败')
            return
          }
          console.log('生成成功')
          const qrText = item.realName
          const size = _size

          const fontWeight='bold' // 字体 粗体 格式
          const fontSize = 16 // 字体大小
          const tb = 12 // 底部文字上下间距
          const realHeight = size + fontSize + 2*tb //实际高度
          // 画布上下文对象
          const ctx = that.$refs.canvas.getContext("2d");
          // 获取二维码数据
          const data = ctx.getImageData(0, 0, size, size);
          ctx.fillStyle = "#ffffff"
          that.$refs.canvas.setAttribute('height', realHeight); // 重设画布像素高度
          that.$refs.canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
          ctx.fillRect(0, 0, size, realHeight)
          ctx.putImageData(data, 0, 0)// 填充二维码数据
          ctx.font = `${fontWeight} ${fontSize}px Arial`;
          const textWidth = ctx.measureText(qrText).width; //文字真实宽度
          const ftop = size + tb; //文字距顶部位置
          const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
          const textPadding = fontSize / 2; //字体边距为字体大小的一半可以自己设置
          // 设置底部背景色
          ctx.fillStyle = "#eaeaea";
          ctx.fillRect(0, size, size, realHeight - 2*tb);
          // 设置字体填充位置
          ctx.fillRect(
            fleft - textPadding / 2,
            ftop - textPadding / 2,
            textWidth + textPadding,
            fontSize + textPadding
          );
          ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
          ctx.fillStyle = "#333";// 字体颜色
          ctx.fillText(qrText, fleft, ftop)
          //下载二维码
          let base64Img =  that.$refs.canvas.toDataURL('image/jpg');
          //创建下载标签,然后设置链接和图片名称
          let a = document.createElement('a')
          a.href = base64Img
          a.download = item.realName + ' - 二维码'+Date.now()
          a.click()
          //销毁元素
          a.remove()
        });
      },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值