Solo  当前访客:1 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

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

2020-07-15 20:24:45 iwh718
0  评论    0  浏览

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

思路就是

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绘制两层图片就好了。

这样的优势呢,就是没有后端的东西,消耗用户的设备性能代替后端服务器,最重要的是我不用多写接口了,哈哈。


标题:【前端生成H5海报加动态二维码】JS
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP