视频截图 预览 保存

downloadIamge(imgsrc, name) {//下载图片地址和图片名
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},

//创建且只创建一个不可见的canvas
let canvas = document.getElementById("picCanvas");
if (!canvas) {
    canvas = document.createElement("canvas");
    canvas.id = "picCanvas";
    document.body.append(canvas);
}
canvas.style.setProperty("display", "none");

let context = canvas.getContext("2d");
let dataURL = '';
if (!!this.preview.videoPlayer) {
    let playerDom = $('#my-player' + this.videoId)[0]
    canvas.width = this.playerDivWidth;
    canvas.height = this.playerDivHeight;
		//用canvas的context 和 <video\> 进行截图
    context.drawImage(playerDom, 0, 0, this.playerDivWidth, this.playerDivHeight);  // 将video中的数据绘制到canvas里
    dataURL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
} else {
    this.$message({type: 'error', message: '请在视频播放时进行截图'})
    return
}
console.log(dataURL);

// if (!!this.preview.streamUrl)
this.$emit('command', {
    order: "getPicture",
    deviceCode: this.deviceCode,
    streamUrl: this.preview.streamUrl,
    dataURL: dataURL,
    time: Date.now()
});

let id = self.$notify({
    // title: '截图成功',
    id: 1,
    showClose: false,
    duration: 0,
    customClass: 'imgNotify' + time,
    dangerouslyUseHTMLString: true,
    message: "<div class='picture-container'>" +
        "<img src='" + dataURL + "' class='smallimg'  onclick=\"showBigImg('" + dataURL + "'," + time + ")\" alt=''/>" +
        "<div class='button-div'><a href='" + dataURL + "' download=" + new Date(time).Format('yyyy-MM-dd__hh:mm:ss') + " onclick='closeNotify(" + time + ")' >下载</a></div>" +
         "<div class='button-div'><a onclick='closeNotify(" + time + ")'>关闭</a></div>" +
        "</div>",
});