html2canvas截图功能

// 截图
        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样式不识别不能截下来,只能换方式

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章