使用Canvas绘制分享海报

这几天接到一个需求，需要将一个邀请链接转换为一个带有二维码并且能够分享出去的海报图，网上找了很多的方法，也踩了不少的坑，希望大家遇到类似的需求能够少走弯路。。

具体效果图如下：

效果图

首先我采用了 qrcode 的插件，使用这个插件能够生成一个二维码。然后还使用了canvas图片合成的技术，使文字，头像图片以及二维码合成到一张图片上。

以下为代码部分：

HTML部分

<!--头像-->
<img id="userAvatar" data-lazy="{$member['avatar']}" class="head" />
<!--名字职位-->
<p class="nickname" data-name="{$member['nickname']}">{$member['nickname']}</p>

<p class="person-position" data-companyName="{$member['companyName']} {$member['positionInfo']}">{$member['companyName']} {$member['positionInfo']} </p>
    
    

<div class="mask"></div>
<!--二维码分享海报-->
<div class="qr-code">
 <span class="pop-close icow icow-error"></span>
 <!--背景图-->
 <img id="qrcodeBgImg" style="display: none;" src="../addons/ewei_shopv2/plugin/sns/template/mobile/default/images/fenxiang.jpg" style="width: 0.1px;height: 0.1px;">
 <!--二维码-->
 <div id="code" style="display: none;"></div>
 <!--合成后的海报图-->
 <img id="img3" src="">
</div>

JS部分：

  var codeUrl = $('#copyUrl').val();
  var nickname = $('.nickname').attr('data-name');
  var personPosition = $('.person-position') .attr('data-companyName');
  
  //二维码生成,code参数为id为code的div容器，
  var qr = new QRCode(code, {
   text: codeUrl,//二维码内容，可以为一个链接
   width: 60,//宽度
   height: 50,//高度
   correctLevel: 3//容错级别
  })
  
  //绘制海报分享图
  function draw() {
      var code = $('#code')[0],//获取二维码
       codeImg = $('#code canvas')[0],
    Avatar = userAvatar,//获取头像
       canvas = document.createElement("canvas"),
          context = canvas.getContext("2d");
      
      //获取设备像素比
   var  devicePixelRatio = window.devicePixelRatio || 1,   
     backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1, 
     ratio = devicePixelRatio / backingStoreRatio; 
   //获取背景图高宽
      var CanvasBgWidth = qrcodeBgImg.width;
      var CanvasBgHeight = qrcodeBgImg.height;
      //canvas画布扩大， 保证能够高清显示
      canvas.width = CanvasBgWidth  * ratio;
      canvas.height = CanvasBgHeight  * ratio;
      
   $(canvas).css({'width':CanvasBgWidth ,'height':CanvasBgHeight});
   $('#img3').css({'width':'16rem'});
   context.scale(ratio, ratio);
   
   //背景
      context.drawImage(qrcodeBgImg,0,0,CanvasBgWidth,CanvasBgHeight);
      //二维码
      context.drawImage(codeImg,46 * ratio,325 * ratio,60 * ratio,50 * ratio);
      //头像
   context.drawImage(Avatar,260 * ratio ,270 *ratio ,30 * ratio ,30 * ratio);
    //文字
      context.fillStyle = '666';   // 文字填充颜色
      context.font = '1rem Baoli SC';
   
      var name_text = nickname;
   context.textAlign = 'right';
      context.fillText(name_text,246 * ratio,280 * ratio);
   
      var desc_1 = personPosition;
   context.textAlign = 'right';
      context.fillText(desc_1,246 * ratio,300 * ratio);
   
      context.stroke();

      // 将画布内容导出
      var src = canvas.toDataURL();
      img3.src = src;
  }
  
    //点击显示或隐藏分享图
  $('.share-qrcode').click(function(e) {

   $('.mask').show();
   $('.qr-code').fadeIn();
   draw();
  })
 
  $('.pop-close').click(function(e) {
   $('.mask').hide();
   $('.qr-code').fadeOut();
  })

以上使用的 qrcode 插件可能与你使用的版本略有不同， 具体请参考官网使用方法。

在获取二维码的时候请务必选择code容器内的canvas元素， 如果获取的是里面的img元素，在华为或者荣耀手机下二维码会不显示，应该是兼容问题。