项目实践 canvas截屏功能

          满屏截图 () {
            // 动态创建画布
            const canvas = document.createElement("canvas");
            // 获取画笔
            const canvasCtx = canvas.getContext('2d');
            // 设置画布宽高
            canvas.width = 200;
            canvas.height = 200;
            // 获取容器的dom 此处以视频为例
            let videoDOM = document.getElementById('video');
            // 在画布上绘制图像
            canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
            canvasCtx.font = '16px 宋体';
            canvas.fillStyle = "#fff";
            canvasCtx.textBaseline = "maddle";
            canvasCtx.textAlign = "right";
            canvasCtx.fillText("时间", canvas.width - 10, canvas.height - 10);
            // 生成截图的base64 toDataURL()方法不能对跨域资源加载
            let imgBase64 = canvas.toDataURL("image/png");
            console.log(imgBase64);
        },
 
        框选截图 () {
            let flag = false;
            let start_X = null; // 开始x坐标
            let start_Y = null; // 开始y坐标
            let end_X = null; // 结束x坐标
            let end_Y = null; // 结束y坐标
            window.scroll(0, 0);
            let canvas = document.createElement("canvas");
            let canvasCtx = canvas.getContext('2d');
            let video = document.getElementById('video');;
            canvas.width = video.offsetWidth;
            canvas.height = video.offsetHeight;
            canvas.width = 660;
            canvas.height = 440;
            canvas.style.position = "absolute";
            canvas.style.top = "0px";
            canvas.style.left = "0px";
            video.parentElement.appendChild(canvas);
            canvas.onmousedown = (e) => {
                if (video) {
                    flag = false;
                    canvas.remove();
                    return;
                } flag = true;
                start_X = e.offsetX;
                start_Y = e.offsetY;
            }
            canvas.onmousemove = (e) => {
                if (!flag) {
                    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                    end_X = e.offsetX;
                    end_Y = e.offsetY;
                    // 调用画框函数(start_X,start_Y,end_X,end_Y)
                }
            }
            canvas.onmouseup = (e) => {
                flag = false;
                canvas.onmousemove = null;
                canvas.onmouseup = null;
                end_X = e.offsetX;
                end_Y = e.offsetY;
                canvasCtx.drawImage(video, start_X, start_Y, end_X - start_X, end_Y - start_Y);
                let imgBase64 = canvas.toDataURL("image/png");
                console.log(imgBase64);
                canvas.remove()
            }
        }

最近项目中遇到,需要实现canvas截屏功能，直接上代码。