canvas截屏视频流画面

代码：

// 用canvas 画 video的截图
function GrabImage() {
    this.canvas = null;
    this.ctx = null;
    this.width = 0;
    this.height = 0;
    this.createCanvas = function(info) {
        if (this.canvas != null) {
            return;
        }

        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute("width", info.width);
        this.canvas.setAttribute("height", info.height);
        this.canvas.style.width = info.width + "px";
        this.canvas.style.height = info.height + "px";
        this.canvas.style.backgroundColor = "gray";
        // this.canvas.style.visibility = "hidden";
        // this.canvas.style.display= "none";
        // document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext("2d");
        this.ctx.fillStyle = "white";
        this.width = info.width;
        this.height = info.height;
    }

    this.grab = function(items) {
        if (this.ctx == null) {
            return;
        }

        this.ctx.fillRect(0, 0, this.width, this.height);

        for (var i = 0; i < items.length; ++i) {
            this.ctx.drawImage(items[i].v, items[i].x, items[i].y, items[i].w, items[i].h);
        }
    }

    this.data = function() {
        if (this.ctx == null) {
            return;
        }

        return this.canvas.toDataURL("image/jpeg");
    }
}

// 截屏---------------------------------------------------------
        handleScreenshot: function() {
            if (!this.grabimage) {
                this.grabimage = new GrabImage();
            }

            this.grabimage.createCanvas({width:918, height:345});
            var dom = [];

            if ('123'.indexOf(this.mode)>=0) {
                dom = [{v: $('#one-box').find('video')[0], x:153, y:0, w:612, h:345}];
            } else if ('456'.indexOf(this.mode) >= 0) {
                dom = [{v: $('#two1-box').find('video')[0], x:0, y:45, w:454, h:265},
                {v: $('#two2-box').find('video')[0], x:464  , y:45, w:454, h:265}];
            } else if (7 == this.mode) {
                dom = [{v: $('#three1-box').find('video')[0], x:0, y:0, w:612, h:345},
                {v: $('#three2-box').find('video')[0], x:622, y:0, w:294, h:167},
                {v: $('#three3-box').find('video')[0], x:622, y:177, w:294, h:167}];
            }

            this.grabimage.grab(dom);
            var res = this.grabimage.data();
            // console.log('s'+res );

            let aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = res;
            aLink.download = "截屏.jpg";
            // 触发点击-然后移除
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink);
            


            // html2canvas(document.getElementsByClassName('right1-box1')[0], {
            //     useCORS: true,
            // }).then(canvas => {  // {backgroundColor: 'blue'}
            //     var imgData = canvas.toDataURL("image/png");
            //     let aLink = document.createElement("a");
            //     aLink.style.display = "none";
            //     aLink.href = imgData;
            //     aLink.download = "截屏.png";
            //     // 触发点击-然后移除
            //     document.body.appendChild(aLink);
            //     aLink.click();
            //     document.body.removeChild(aLink);
            // });
        },

标签：canvas,aLink,视频流,style,height,width,截屏,document
来源： https://blog.csdn.net/zhangjing0320/article/details/115219121