一.canvas简介

Canvas APIlink（画布）是在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画布上。

三.截图代码

```js

      满屏截图 () {
        // 动态创建画布
        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容器大小不一样，这个功能可以让后端算相对坐标来实现。大家还有啥好方法可以评论区讨论一下。`