【项目笔记】：前端canvas截图功能

一.canvas简介

        Canvas APIhttps://www.canvasapi.cn/（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。简单来说就是html5新增的画图工具。

二.canvas常用方法及属性

        不管实现什么功能得先获取canvas画布的dom,在画布上实现功能，获取dom的那六种方式。这里就不说了获取画笔通过getContext()方法，语法：canvasDom.getContext('2D');

        今天我们主要用的方法

canvas.toDataURL(mimeType, quality);

参数说明
mimeType（可选）String
mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
            
quality（可选）Number
quality表示转换的图片质量。范围是0到1。此参数要想有效，图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。默认压缩质量是0.92。
根据自己的肉眼分辨，如果使用toDataURL()的quality参数对图片进行压缩，同样的压缩百分比呈现效果要比Adobe Photoshop差一些。

返回值
返回base64 data图片数据。

drawImage()：在画布上绘制图像，canvas最常用的方法，没有之一。

语法
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数
各个参数含义和作用如下：

image:Object
绘制在Canvas上的元素，可以是各类Canvas图片资源（见CanvasImageSource），如<img>图片，SVG图像，Canvas元素本身等。

dx：Number
在Canvas画布上规划一片区域用来放置图片，dx就是这片区域的左上角横坐标。

dy:Number
在Canvas画布上规划一片区域用来放置图片，dy就是这片区域的左上角纵坐标。

dWidth:Number
在Canvas画布上规划一片区域用来放置图片，dWidth就是这片区域的宽度。

dHeight:Number
在Canvas画布上规划一片区域用来放置图片，dHeight就是这片区域的高度。

sx:Number
表示图片元素绘制在Canvas画布上起始横坐标。

sy:Number
表示图片元素绘制在Canvas画布上起始纵坐标。

sWidth:Number
表示图片元素从坐标点开始算，多大的宽度内容绘制Canvas画布上。

sHeight:Number
表示图片元素从坐标点开始算，多大的高度内容绘制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()
            }
        }

四.框选截图时有误差

        其实就是你框选的范围和生成的base64图片有误差，这个因为图片的原因，图片原始尺寸跟你的r容器大小不一样，这个功能可以让后端算相对坐标来实现。大家还有啥好方法可以评论区讨论一下。