vue+canvas+二维码，实现带二维码的证件卡片效果

 

前言：

         在vue中使用二维码和在vue中使用我们的canvas绘图都是比较好的功能，正好因为项目需要，把这两部门的内容糅合起来使用，这里分享下我自己的方法、

最终效果图：

从两方面分开来说下实现的步骤

步骤一：vue中实现二维码绘制(qrcode)

1.安装qrcode

npm i qrcode

2、template里面创建容器，并引入qrcode,在mehtods里面写入渲染方法，mounted里面调用

 import QRCode from 'qrcode'//二维码

methods:{
    /**初始化绘制二维码 */
      useqrcode(){
        var canvas = document.getElementById('qrCode');
        let content = this.person.id==undefined?'':this.person.id+'@1';//二维码内容，如果是地址会跳转过去
        QRCode.toCanvas(canvas, content, function (error) {
          if (error){
              console.error(error)
          }else{
              console.log('QRCode success!');
          }
        })
        
        //到此绘制二维码结束，下面是将二维码变成路径让canvas可以调用
        let canva_qr = document.getElementById("qrCode");

        //将二维码vanvas转换为在线路径，这样可以在最终展示的canvas里面通过引入图片把二维码放进去
        this.codeimgUrl = this.convertBase64ToBlob(this.convertCanvasToImage(canva_qr));
      },


       //将canvas转成图片，生成在线路径
        //base64转blod
      convertBase64ToBlob(base64) {
        var base64Arr = base64.src.split(',');
        var imgtype = '';
        var base64String = '';
        if (base64Arr.length > 1) {
          //如果是图片base64，去掉头信息
          base64String = base64Arr[1];
          imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':') + 1, base64Arr[0].indexOf(';'));
        }
        // 将base64解码-atob()是window里面用于解码使用 base-64 编码的字符串。
        var bytes = atob(base64String);
        //var bytes = base64;
        var bytesCode = new ArrayBuffer(bytes.length);
        // 转换为类型化数组
        var byteArray = new Uint8Array(bytesCode);
        // 将base64转换为ascii码
        for (var i = 0; i < bytes.length; i++) {
          byteArray[i] = bytes.charCodeAt(i);
        }

        // 生成Blob对象（文件对象）
        let data = new Blob([bytesCode], {type: imgtype})
        return window.URL.createObjectURL(data);
      },
}

 mounted() {
      this.useqrcode();//初始化绘制二维码
    },

步骤二：canvas绘制证件卡片内容，图片

1、template容器

    您的浏览器不支持canvas标签。

2、methods方法绘制canvas

var canvas = document.getElementById("myCanvas");//获取Canvas对象(画布)
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if (canvas.getContext) {
    let ctx = canvas.getContext("2d");//获取对应的CanvasRenderingContext2D对象(画笔)
    
    
    //以Canvas画布上的坐标(10,10)为起始点，绘制图像
      ctx.beginPath();
      ctx.fillStyle = "#e68d00";
      ctx.fillRect(0, 0, 400, 109)

      ctx.beginPath();
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 109, 400, 136)
      ctx.stroke();
    
      ctx.beginPath();
      ctx.fillStyle = '#fff';
      ctx.font = "30px Arial";

      ctx.textAlign = "center";
      ctx.fillText("胸", 90, 60,);
      ctx.fillText("卡", 150, 60,);
      ctx.fillText("证", 210, 60,);


      ctx.beginPath();
      ctx.fillStyle = '#fff';
      ctx.font = "12px Arial";
      ctx.fillText('(2020年度)', 140, 90);
      ctx.fillStyle = '#000';
      ctx.font = "16px Arial";

      ctx.beginPath();
      ctx.fillText("姓名：", 30, 137);
      ctx.fillRect(45, 139, 82, 2)
      ctx.stroke();

      ctx.beginPath();
      ctx.fillText("年龄：", 160, 137);
      ctx.fillRect(175, 139, 60, 2)
      ctx.stroke();

      ctx.beginPath();
      ctx.fillText("单位：", 30, 167);
      ctx.fillRect(45, 169, 191, 2)
      ctx.stroke();

      ctx.beginPath();
      ctx.fillText("工种：", 30, 197);
      ctx.fillRect(45, 199, 191, 2);

      ctx.beginPath();
      ctx.fillStyle = '#e68d00';//底部颜色
      ctx.fillRect(0, 225, 400, 20)
      ctx.stroke();
        

      ctx.beginPath();
      //添加二维码
      let qrCodeImg = new Image();
          qrCodeImg.src = data.url;//传来的地址
          qrCodeImg.crossOrigin="anonymous";//解决跨域问题
          qrCodeImg.onload = function () {
             ctx.drawImage(qrCodeImg, 10, 25, 60, 60);//二维码,前两个参数是位置，后两个是大小（left,top,width,height）
          }
      //添加人物头像
       let peopleImg = new Image();
           peopleImg.src = data.url;//传来的地址
           peopleImg.crossOrigin="anonymous";//解决跨域问题
           peopleImg.onload = function () {
               ctx.drawImage(peopleImg, 270, 64, 119, 150);//头像,前两个参数是位置，后两个是大小（left,top,width,height）
          }

*注：（更多资料）

                     1、canvas绘制文本入口；

                     2、canvas绘制曲线、扇形图；

                     3、canvas绘制图片