html2canvas网页截图转成图片

做一个将网页截图生成成图片的功能,打算在前端实现,然后发现了这个html2canvas,用的过程中出现了一些问题,有些心得,写一下。

整个思路捋下来很简单,就是将指定的dom做成canvas,然后再将canvas转成base64的图片。

首先是出现了错位和模糊问题。网上的说法是,现将canvas画成两倍,然后再转图片。我试了试,没看出多大的区别,所以就只了解了一下他们的处理方法和思路,没有对自己的项目进行更改。

还有一个问题是,我在本地测试,有的图片是截取不上的,。查了半天才弄清楚,必须得有服务器环境。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>个人海报</title>
</head>
<body>
<script>
    (function (win) {
        var doc = win.document
        var docEl = doc.documentElement
        resizeFn()
        window.onresize = function () {
            resizeFn()
        }
        function resizeFn () {
            var width = docEl.getBoundingClientRect().width
            var rem = width / 10
            docEl.style.fontSize = rem + 'px'
        }
    })(window)
</script>
<link rel="stylesheet" href="libs/swiper/css/swiper.min.css">
<link href="css/main.css"  rel="stylesheet" >
<div id="loading"><img src="img/loading.gif"  alt=""></div>
<div id="container">
    <div class="title">
        <div>预览海报</div>
    </div>
    <div id="my"></div>
    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide "><div class="swip-ct"><img src="img/img001.jpg" alt=""><div class="ewmContainer"></div></div></div>
            <div class="swiper-slide "><div class="swip-ct"><img src="img/img002.jpg" alt=""><div class="ewmContainer"></div></div></div>
            <div class="swiper-slide "><div class="swip-ct"><img src="img/img003.jpg" alt=""><div class="ewmContainer"></div></div></div>
        </div>
    </div>
    <div id="btn">
        一键生成海报
    </div>
</div>
<div id="hb"><div id="hbcontainer"></div></div>
<script src="js/jq1.11.1.js"></script>
<script src="libs/swiper/js/swiper.min.js"></script>
<script src="libs/layer/layer.js"></script>
<script src="libs/html2canvas/html2canvas.min.js"></script>

<script>
    window.onload = function () {
        $('#loading').css('display', 'none')
        $('#container').addClass('active')
    }
    $(function(){
        var winHeight = $(window).height()
        var winWidth = $(window).width()
        /******************************************************************************************
            轮播图
        ***********************************************************************************************/
        var swiperHeight = winHeight - $('.title').outerHeight() - $('#btn').outerHeight() - $('#my').outerHeight()
        $('#swiper-container').height(swiperHeight)
       var swiper = new Swiper('#swiper-container', {
            pagination: '.swiper-pagination',
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: '1',
            loop: true,
            center: true,
            coverflow: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows : false
            }
        });

        /******************************************************************************************
                    生成海报
         ***********************************************************************************************/
        //------------------------------生成预览canvas
       $('#btn').click(function () {
           htmlCanvas()
        })

        function htmlCanvas(){
            var dom=$(".swiper-slide-active .swip-ct");

            html2canvas(dom[0], {
                onrendered: function(canvas) {
                    //添加属性
                    canvas.setAttribute('id','thecanvas');
                    //读取属性值
                    // var value= canvas.getAttribute('id');
                    document.getElementById('hbcontainer').innerHTML = '';
                    document.getElementById('hbcontainer').appendChild(convertCanvasToImage(canvas));
                    setTimeout(function () {
                        showImg()
                    }, 200)
                }
            });

        };
       function showImg() {
           var containerHtml = $("#hb").html()
           // var oH =$('.swip-ct').height() *  $('.tup').width() /$('.swip-ct').width() + 30
           // var oW = winWidth * 0.8 + 30
           layer.open({
               type: 1,
               skin: 'layui-layer-demo', //样式类名
               closeBtn: 0, //不显示关闭按钮
               title: false,
               anim: 2,
               area: ['90%', 'auto'],
               shadeClose: true, //开启遮罩关闭
               content: containerHtml
           });
       }
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.className = 'tup'
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        function ajaxUpLoad(base){
            $.ajax({
                type: "POST",
                url: "",
                async: true,
                data: {base:base},
                dataType: "json",
                success: function (data) {
                },
                error: function (err) {
                }
            });
        }
    })
</script>
</body>
</html>


随机浏览