视频截图预览保存

/ 前端 / Video / 视频截图预览保存

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

https://www.cnblogs.com/liulinjie/p/10245483.html

创建img标签请求远程的图片

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截取视频里的图片

canvas 和  video  的大小要设为一样

截完图后 图片数据就在dataURL里了,可以当成正常的src用.

//创建且只创建一个不可见的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&gt; 进行截图

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()

});

根据dataURL生成一个img 和 一个a 标签.  time 当成id用了,用于标记

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>",
});

视频截图 预览 保存

评论区

视频截图预览保存