使用html2canvas实现H5页面转成图片

1.使用代码详情

<script type="text/javascript">
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

        $(function(){
            var flag = [[${flag}]]
            var className = '';

            if(flag == "1"){
                $('.bg7').show();
                className = 'bg7';
            }else if (flag == "2"){
                $('.bg8').show();
                className = 'bg8';
            }else if (flag == "3"){
                $('.bg5').show();
                className = 'bg5';
            }else if (flag == "4"){
                $('.bg6').show();
                className = 'bg6';
            }

            html2canvas(document.querySelector("."+className),{
                useCORS:true,
            }).then(canvas => {
                $('.share-canvas').css('display','block').attr('src', canvas.toDataURL());
            $("."+className).hide();
        });
        });
    </script>

上图是关键代码,实现原理是:页面进来就加载执行,把当前页面截成一张图片覆盖在页面上,并把当前页面隐藏…className是要转成图片的当前页面,使用的时候需要更换.share-canvas标识的是生成的图片,见下图中的标签,相当于生成图片的载体.

注意:需要引入html2canvas.js和jquery.min.js