H5截取当前网页

最新推荐文章于 2024-07-18 08:00:42 发布

空白_回忆

最新推荐文章于 2024-07-18 08:00:42 发布

阅读量3.3k

点赞数 3

分类专栏： html+css 文章标签： javascript canvas 函数 html html2canva

本文链接：https://blog.csdn.net/qq_26291823/article/details/51902015

版权

html+css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

H5截取当前网页

ps：本人亲测，阿里云2核4G5M的服务器性价比很高，新用户一块多一天，老用户三块多一天，最高可以买三年，感兴趣的可以戳一下：阿里云折扣服务器

使用html2canvas工具，之后加入JS代码
<script  type="text/javascript" >

            //生成截图
            $(document).ready( function(){
                $("#div2_2").on("click", function(event) { //这里是点击事件按钮
                    event.preventDefault();
                    html2canvas(document.getElementById("div1"), {//这里是要截图的DIV
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function(canvas) {
                            canvas.id = "mycanvas";
                            //document.body.appendChild(canvas);
                            //生成base64图片数据
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src =  dataUrl;
                            document.body.appendChild(newImg);
                            window.open(newImg.src);
                        }
                    });
                });

            });

        </script>


注意事项：有的浏览器不支持或者不能理解z-index，所以不要使用z-index，关于absolute布局，因为是已经脱离了html的DOM流，所以，同一div中的absolute层，谁在DOM（文档流）的前面，谁就会出现在屏幕的下层，同理，谁在后面写，谁在上层