【前端生成H5海报加动态二维码】JS

❄️2winter2020-07-152020-07-15

最近项目遇到了生成分享海报的需求，然后，为了最小化的实现，就采用了纯前端方案，包括二维码生成与海报绘制。

思路就是

1.使用Qrcode.js生成动态的前端二维码：这个原理也是canvas

2.生成二维码后是一个base64的图片，取到值后，添加到海报图片的指定位置覆盖【使用绝对定位就好了】，

这个时候是两个图，无法长按保存。【将这个区域移出屏幕处理！！】

3.使用html2canvas截取指定区域的图像，将海报与二维码叠加的区域截图，绘制到canvas上

4.从canvas拿到img

代码


<div class="preview__poster">

       <div class="preview__poster--box"></div>
   </div>
   <div class="friend__create--poster" onclick="createPoster()">点击生成分享海报</div>
   <div class="friend__poster-mask">
       <div class="friend__share--posterBox">
       </div>
       <div class="friend__poster--tips" onclick="closePoster()" >长按图片保存 点击关闭 </div>

   </div>

//生成用户分享码
   //使用qrcode生成二维码
    showCode('url');
    //拿到二维码img
    let codeImg = $('#qrcode img');
    codeImg.addClass('friend__share--code') ;
    let posterBg = $(' <img src="/static/home/img/index/poster.jpeg" class="friend__share--poster">');
   //将二维码和海报叠加处理
    $('.preview__poster--box').append(codeImg);
    $('.preview__poster--box').append(posterBg);
    /**
     * 生成分享海报
     */
    function createPoster() {
        $('.friend__poster-mask').show();
        //截取叠加的区域
        html2canvas($(".preview__poster--box")[0],{}).then(canvas => {
           //获取img
            let path =  canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
           //展示叠加的图片
            $('.friend__share--posterBox').append('<img src='+ path + '  class="friend__share--poster">');

        });
    }

    function  closePoster() {
        $('.friend__poster-mask').hide();
    }

另一个方法，就是使用canvas绘制两层图片就好了。