html2canvas截图功能

灰太狼 2022-05-23 10:53 236阅读 0赞

// 截图
            screenshot(){
                let canvas2 = document.createElement("canvas");
                let region = $("#screenshot");//需要截图的那个div，并且需要加载完
                let w = parseInt(region.width());
                let h = parseInt(region.height());
                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                canvas2.width = w * 2;
                canvas2.height = h * 2;
                //可以按照自己的需求，对context的参数修改,translate指的是偏移量
                let context = canvas2.getContext("2d");
                context.scale(2,2);
                context.mozImageSmoothingEnabled = false;//消除canvas文字锯齿，感觉没啥用
                context.webkitImageSmoothingEnabled = false;//消除canvas文字锯齿，感觉没啥用
                context.msImageSmoothingEnabled = false;//消除canvas文字锯齿，感觉没啥用
                context.imageSmoothingEnabled = false;//消除canvas文字锯齿，感觉没啥用
                html2canvas(region, {
                    canvas: canvas2,
                    useCORS: true,
                    logging: true,
                    taintTest: true,
                    dpi: window.devicePixelRatio*2,
                }).then(canvas => {
                    let imgUrl = canvas.toDataURL("image/png",1.0);//最终截图图片
                    
                });
            },

这个例子绝对清晰，如果您的截图还不清晰的话，那就是css3的样式问题，特别注意，图片不清晰的话，要使用img标签，不要用设置背景图片，高宽度最好不要设置百分比。  
有些人截图不全：那是因为截图区域超出可视窗口  
有些人截图样式不显示：canvas对于一些css3样式不识别不能截下来，只能换方式