html2canvas截图功能-蒲公英云

html2canvas截图功能

灰太狼 2022-05-23 10:53 425阅读 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);//最终截图图片
            });
        },