用视频第一帧当视频封面图片

最新推荐文章于 2022-12-02 10:35:36 发布

小白d

最新推荐文章于 2022-12-02 10:35:36 发布

阅读量221

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_57166067/article/details/123336270

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

selectdxsgal() {
  let url = AjaxPathConfig.RestFulAPI.Interface.face.getBasePath();
  const params = {
  
  }
  axios.get(url + "casesAlk/getPagingCasesAlkVideo", { params }).then((res) => {
    if (res && res.data && res.data.meta && res.data.meta.success) {
      let array = res.data.data.rows;
      let arryNew = [];
      array.forEach((item) => {
        //视频链接
        let wjlj =
            "http://10.66.4.20:8085/case/" +
            item.cases_no +
            "/" +
            item.files_filename;（换成自己的）
        let _this = this;
        return new Promise(function(resolve, reject) {
          let dataURL = "";
          let video = document.createElement("video");
          video.setAttribute("crossOrigin", "anonymous"); //处理跨域
          video.setAttribute("src", wjlj);
          video.setAttribute("width", 400);
          video.setAttribute("height", 240);
          video.setAttribute("preload", "auto");
          video.addEventListener("loadeddata", function() {
            let canvas = document.createElement("canvas"),
                // let canvas = document.getElementById("mycanvas"),
                width = video.width, //canvas的尺寸和图片一样
                height = video.height;
            canvas.width = width;
            canvas.height = height;
            canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
            dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
            console.log(dataURL)
            // item.videoImg = dataURL;
            arryNew.push(Object.assign({ videoImg: dataURL,wjlj:wjlj}, item));
            resolve(dataURL);
          });
        });
      });
      //赋值
      this.dxsgal = arryNew;
    } else {
      this.$message.error("获取数据失败！");
    }
  });
},