代码:
// 用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);
// });
},